本篇內容主要講解“怎么理解的React Fiber”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么理解的React Fiber”吧!
在早期的 React 版本中，也就是 React16.8 版本之前。
大量的同步計算任務阻塞了瀏覽器的UI渲染。默認情況下，JS運算、頁面布局和頁面繪制渲染都是運行在瀏覽器的主線程當中，他們之間是互斥的關系。
如果 JS 運算持續占用主線程，頁面就沒法得到及時的更新，當我們調用setState更新頁面的時候，React 會遍歷應用的所有節點，與老的 dom 節點進行 diff 算法的對比，最小代價更新頁面，即使這樣，整個過程也是一氣呵成，不能被打斷的，如果頁面元素很多，整個過程占用的時間就可能超過16毫秒，出現掉幀的現象。
針對這一現象，React 團隊從框架層面對 web 頁面的運行機制做了優化，此后，Fiber誕生了。
說到16ms，我們來看這樣的一個概念
目前大多數設備的屏幕刷新率為60次/秒
瀏覽器的渲染動畫或頁面的每一幀的速率也需要跟設備屏幕的刷新率保持一致。
頁面是一幀一幀繪制出來的，當每秒繪制的幀數(FPS)達到60時，頁面是流暢的，小于這個值時，用戶會感覺到卡頓。
每個幀的預算時間是16.66毫秒（1秒/60）
1s 60幀，所以我們書寫代碼時盡量不讓一幀的工作量超過16ms
解決主線程長時間被 JS 暈眩占用這一問題的基本思路，是將運算切割為多個步驟，分批完成。也就是說在完成一部分任務之后， 將控制權交回給瀏覽器，讓瀏覽器有時間再進行頁面的渲染。等瀏覽器忙完之后，再繼續之前React未完成的任務。
舊版 React 通過遞歸的方式進行渲染，使用的是 JS 引擎自身的函數調用棧，它會一直執行到?？諡橹?/strong>。
而Fiber實現了自己的組件調用棧，它以鏈表的形式遍歷組件樹，可以靈活地暫停、繼續和丟棄執行的任務。實現的方式是使用了 瀏覽器的requestIdleCallback這一 API。官方的解釋是這樣的：
window.requestIdleCallback()會在瀏覽器
空閑時期依次調用函數，這就可以讓開發者在主事件循環中執行后臺或優先級低的任務，而且不會像對動畫和用戶交互這些延遲觸發產生關鍵的事件影響。函數一般會按先進先調用的順序執行，除非函數在瀏覽器調用它之前就到了它的超時時間。
希望快速響應用戶，讓用戶覺得夠快，不能阻塞用戶的交互行為
requestIdleCallback 使開發者能夠在主事件循環上執行后臺和低優先級的工作，而不會影響延遲關鍵事件，例如動畫和輸入的響應
正常幀任務完成后沒超過16ms，說明時間有賦予，此時就會執行requestIdleCallback里注冊的任務
Fiber 是一個執行單元，每次執行完一個執行單元, React 就會檢查現在還剩多少時間，如果沒有時間就將控制權讓出去
React 目前的做法是使用鏈表, 每個 VirtualDOM 節點內部表示為一個Fiber，它可以用一個 JS 對象來表示：
const fiber = {
stateNode, // 節點實例
child, // 子節點
sibling, // 兄弟節點
return, // 父節點
}React 會遞歸比對VirtualDOM樹，找出需要變動的節點，然后同步更新它們。這個過程 React 稱為Reconcilation(協調)
在Reconcilation期間，React 會一直占用著瀏覽器資源，一則會導致用戶觸發的事件得不到響應, 二則會導致掉幀，用戶可能會感覺到卡頓
let root = {
key: 'A1',
children: [
{
key: 'B1',
children: [
{
key: 'C1',
children: []
},
{
key: 'C2',
children: []
}
]
},
{
key: 'B2',
children: []
}
]
}
function walk(element) {
doWork(element);
element.children.forEach(walk);
}
function doWork(element) {
console.log(element.key);
}
walk(root);在 Fiber 出現之前， React 會不斷遞歸遍歷虛擬 DOM 節點，占用著瀏覽器資源，積極地浪費性能，造成卡頓現象，且協調階段是不能
被打斷的。
Fiber 出現之后，通過某些 Fiber 調度策略合理分配 CPU 資源，讓自己的
協調階段變成可被終端，適時地讓 CPU（瀏覽器）執行權，提高了性能優化。
每次渲染有兩個階段：Reconciliation(協調\render階段)和Commit(提交階段)
協調階段: 這個階段可以被中斷, 通過Dom-Diff算法找出所有節點變更，例如節點新增、刪除、屬性變更等等, 這些變更React 稱之為副作用(Effect)
提交階段: 將上一個階段計算出來的需要處理的副作用(Effects)一次性執行了。這個階段必須同步執行，不能被打斷
簡單理解的話
階段1：生成Fiber樹，得出需要更新的節點信息。（可打斷）
階段2：將需要更新的節點一次性地批量更新。（不可打斷）
Fiber的協調階段，可以被優先級較高的任務（如鍵盤輸入）打斷。
階段1可被打斷的特性，讓優先級更高的任務先執行，從框架層面大大降低了頁面掉幀的概率。
Fiber Reconciliation(協調) 在階段一進行 Diff 計算的時候，會生成一棵 Fiber 樹。這棵樹是在 Virtual DOM 樹的基礎上增加額外的信息生成來的，它本質來說是一個鏈表。
Fiber 樹在首次渲染的時候會一次過生成。在后續需要 Diff 的時候，會根據已有樹和最新 Virtual DOM 的信息，生成一棵新的樹。這顆新樹每生成一個新的節點，都會將控制權交回給主線程，去檢查有沒有優先級更高的任務需要執行。如果沒有，則繼續構建樹的過程。
1.如果過程中有優先級更高的任務需要進行，則 Fiber Reconciler 會丟棄正在生成的樹，在空閑的時候再重新執行一遍。
2.在構造 Fiber 樹的過程中，Fiber Reconciler 會將需要更新的節點信息保存在Effect List當中，在階段二執行的時候，會批量更新相應的節點。
從頂點開始遍歷
如果有第一個兒子，先遍歷第一個兒子
如果沒有第一個兒子，標志著此節點遍歷完成
如果有弟弟遍歷弟弟
如果有沒有下一個弟弟，返回父節點標識完成父節點遍歷，如果有叔叔遍歷叔叔
沒有父節點遍歷結束
類比 Git 分支功能,從舊樹中 fork 出來一份，在新分支進行添加、刪除和更新操作，經過測試后進行提交。
到此，相信大家對“怎么理解的React Fiber”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
