歡迎關注我的公衆號睿Talk，獲取我最新的文章：
一、前言
在 React Fiber 架構面世一年多後，最近 React 又發佈了最新版 16.8.0，又一激動人心的特性：React Hooks 正式上線，讓我升級 React 的意願越來越強烈了。在升級之前，不妨回到原點，瞭解下人才濟濟的 React 團隊爲什麼要大費周章，重寫 React 架構，而 Fiber 又是個什麼概念。
二、React 15 的問題
在頁面元素很多，且需要頻繁刷新的場景下，React 15 會出現掉幀的現象。請看以下例子：
https://claudiopro.github.io/...
其根本原因，是大量的計算任務阻塞了瀏覽器的 UI 渲染。默認情況下，JS 運算、頁面佈局和頁面繪製都是運行在瀏覽器的主線程當中，他們之間是互斥的關係。如果 JS 運算持續佔用主線程，頁面就沒發得到及時的更新。
針對這一問題，React 團隊從框架層面對 web 頁面的運行機制做了優化，得到很好的效果。
三、解題思路
解決主線程長時間被 JS 運算佔用這一問題的基本思路，是將運算切割爲多個步驟，分批完成。也就是說在完成一部分任務之後，將控制權交回給瀏覽器，讓瀏覽器有時間進行頁面的渲染。等瀏覽器忙完之後，再繼續之前未完成的任務。爲了達到這個效果，需要藉助瀏覽器的requestIdleCallback這一 API。官方的解釋是這樣：
window.requestIdleCallback()會在瀏覽器空閒時期依次調用函數， 這就可以讓開發者在主事件循環中執行後臺或低優先級的任務，而且不會對像動畫和用戶交互這樣延遲觸發而且關鍵的事件產生影響。函數一般會按先進先調用的順序執行，除非函數在瀏覽器調用它之前就到了它的超時時間。
有了解題思路後，我們再來看看 React 具體是怎麼做的。
四、React 的答卷
React 框架內部的運作可以分爲 3 層：
- Virtual DOM 層，描述頁面長什麼樣。
- Reconciler 層，負責調用組件生命週期方法，進行 Diff 運算等。
- Renderer 層，根據不同的平臺，渲染出相應的頁面，比較常見的是 ReactDOM 和 ReactNative。
這次改動最大的當屬 Reconciler 層了，React 團隊也給它起了個新的名字，叫Fiber Reconciler。這就引入另一個關鍵詞：Fiber。
Fiber 其實指的是一種數據結構，它可以用一個純 JS 對象來表示：
const fiber = {
stateNode, // 節點實例
child, // 子節點
sibling, // 兄弟節點
return, // 父節點
}爲了加以區分，以前的 Reconciler 被命名爲Stack Reconciler。Stack Reconciler 運作的過程是不能被打斷的，必須一條道走到黑：
而 Fiber Reconciler 每執行一段時間，都會將控制權交回給瀏覽器，可以分段執行：
爲了達到這種效果，就需要有一個調度器 (Scheduler) 來進行任務分配。任務的優先級有六種：
- synchronous，與之前的Stack Reconciler操作一樣，同步執行
- task，在next tick之前執行
- animation，下一幀之前執行
- high，在不久的將來立即執行
- low，稍微延遲執行也沒關係
- offscreen，下一次render時或scroll時才執行
優先級高的任務（如鍵盤輸入）可以打斷優先級低的任務（如Diff）的執行，從而更快的生效。
Fiber Reconciler 在執行過程中，會分爲 2 個階段。
- 階段一，生成 Fiber 樹，得出需要更新的節點信息。這一步是一個漸進的過程，可以被打斷。
- 階段二，將需要更新的節點一次過批量更新，這個過程不能被打斷。
階段一可被打斷的特性，讓優先級更高的任務先執行，從框架層面大大降低了頁面掉幀的概率。
五、Fiber 樹
Fiber Reconciler 在階段一進行 Diff 計算的時候，會生成一棵 Fiber 樹。這棵樹是在 Virtual DOM 樹的基礎上增加額外的信息來生成的，它本質來說是一個鏈表。
Fiber 樹在首次渲染的時候會一次過生成。在後續需要 Diff 的時候，會根據已有樹和最新 Virtual DOM 的信息，生成一棵新的樹。這顆新樹每生成一個新的節點，都會將控制權交回給主線程，去檢查有沒有優先級更高的任務需要執行。如果沒有，則繼續構建樹的過程：
如果過程中有優先級更高的任務需要進行，則 Fiber Reconciler 會丟棄正在生成的樹，在空閒的時候再重新執行一遍。
在構造 Fiber 樹的過程中，Fiber Reconciler 會將需要更新的節點信息保存在Effect List當中，在階段二執行的時候，會批量更新相應的節點。
六、總結
本文從 React 15 存在的問題出發，介紹 React Fiber 解決問題的思路，並介紹了 Fiber Reconciler 的工作流程。從Stack Reconciler到Fiber Reconciler，源碼層面其實就是幹了一件遞歸改循環的事情，日後有機會的話，我再結合源碼作進一步的介紹。