歡迎關注我的公眾號睿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，源碼層面其實就是干了一件遞歸改循環的事情，日后有機會的話，我再結合源碼作進一步的介紹。

總結

以上是生活随笔為你收集整理的React Fiber 原理介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。