大家好，我是前端西瓜哥。

為了提高 React 的性能，React 團(tuán)隊(duì)在開發(fā) React 16 時(shí)做了底層的重構(gòu)，引入了 React Fiber 的概念。

React Fiber 是什么？

Fiber，本意為 “纖維”，在計(jì)算機(jī)世界中則是 ”纖程“ 的意思。纖程可以看作是協(xié)程的一種，是一種任務(wù)調(diào)度方式。

JavaScript 是單線程的，有一個(gè) event loop 的概念，它有一個(gè)有優(yōu)先級(jí)的任務(wù)隊(duì)列，只能按順序執(zhí)行一個(gè)任務(wù)，是不支持多個(gè)任務(wù)同時(shí)執(zhí)行的。

這種設(shè)計(jì)的好處就是不用考慮多線程導(dǎo)致的順序問(wèn)題，并為此做一些加鎖的額外邏輯，確保執(zhí)行順序符合預(yù)期。但也因?yàn)闊o(wú)法使用并行能力，在 CPU 密集的場(chǎng)景會(huì)有性能問(wèn)題， 比如一個(gè)任務(wù)耗時(shí)過(guò)長(zhǎng)會(huì)導(dǎo)致其他的任務(wù)，導(dǎo)致用戶的交互響應(yīng)發(fā)生延遲。

?React 的組件更新是 CPU 密集的操作，因?yàn)樗鰧?duì)比新舊虛擬 DOM 樹的操作（diff，React 中 Reconcilation 負(fù)責(zé)），找出需要更新的內(nèi)容（patch），通過(guò)打補(bǔ)丁的方式更新真實(shí) DOM 樹（React 中 Renderer 負(fù)責(zé)）。當(dāng)要對(duì)比的組件樹非常多時(shí)，就會(huì)發(fā)生大量的新舊節(jié)點(diǎn)對(duì)比，CPU 花費(fèi)時(shí)間龐大，當(dāng)耗時(shí)大大超過(guò) 16.6ms（一秒 60 幀的基準(zhǔn)） 時(shí)，用戶會(huì)感覺(jué)到明顯的卡頓。

這一系列操作是通過(guò)遞歸的方式實(shí)現(xiàn)的，是 同步且不可中斷 的。因?yàn)橐坏┲袛?，調(diào)用棧就會(huì)被銷毀，中間的狀態(tài)就丟失了。這種基于調(diào)用棧的實(shí)現(xiàn)，我們稱為 Stack Reconcilation。

React 16 的一個(gè)重點(diǎn)工作就是優(yōu)化更新組件時(shí)大量的 CPU 計(jì)算，最后選擇了使用 “時(shí)間分片” 的方案，就是將原本要一次性做的工作，拆分成一個(gè)個(gè)異步任務(wù)，在瀏覽器空閑的時(shí)間時(shí)執(zhí)行。這種新的架構(gòu)稱為 Fiber Reconcilation。

在 React 中，F(xiàn)iber 模擬之前的遞歸調(diào)用，具體通過(guò)鏈表的方式去模擬函數(shù)的調(diào)用棧，這樣就可以做到中斷調(diào)用，將一個(gè)大的更新任務(wù)，拆分成小的任務(wù)，并設(shè)置優(yōu)先級(jí)，在瀏覽器空閑的時(shí)異步執(zhí)行。

FiberNode

前面我們說(shuō)到使用了鏈表的遍歷來(lái)模擬遞歸棧調(diào)用，其中鏈表的節(jié)點(diǎn) React 用 FiberNode 表示。

FiberNode 其實(shí)就是虛擬 DOM，它記錄了：

1. 節(jié)點(diǎn)相關(guān)類型，比如 tag 表示組件類型、type 表示元素類型等。
2. 節(jié)點(diǎn)的指向。
3. 副作用相關(guān)的屬性。
4. lanes 是關(guān)于調(diào)度優(yōu)先級(jí)的。

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Instance
  this.tag = tag; // 組件類型，比如 Function/Class/Host
  this.key = key; // key 唯一值，通常會(huì)在列表中使用
  this.elementType = null;
  this.type = null; // 元素類型，字符串或類或函數(shù)，比如 "div"/ComponentFn/Class
  this.stateNode = null; // 指向真實(shí) DOM 對(duì)象
  // Fiber
  this.return = null; // 父 Fiber
  this.child = null; // 子 Fiber 的第一個(gè)
  this.sibling = null; // 下一個(gè)兄弟節(jié)點(diǎn)
  this.index = 0; // 在同級(jí)兄弟節(jié)點(diǎn)中的位置
  this.ref = null;
  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;
  this.mode = mode;
  // Effects
  this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;
  this.lanes = NoLanes;
  this.childLanes = NoLanes;
  this.alternate = null; 
  // ...
}

Fiber 通過(guò) return 指向父 Fiber，child 指向子 Fiber 的首位、sibling 指向下一個(gè)兄弟節(jié)點(diǎn)。通過(guò)它們我們其實(shí)就能拿到一個(gè)完整的結(jié)構(gòu)樹。

對(duì)于：

function App() {
  return (
    <div className="app">
      <span>hello</span>, Fiber
    </div>
  );
}

形成的 Fiber 樹為：

其中弧線為調(diào)用順序。紫色為 beginWork、粉色為 completeWork。beginWork 是 “遞” 的過(guò)程，而 comleteWork 則是 “歸” 的過(guò)程。

為什么不用 generator 或 async/await？

generator 和 async/await 也可以做到在函數(shù)中間暫停函數(shù)執(zhí)行的邏輯，將執(zhí)行讓出去，能做到將同步變成異步。

但 React 沒(méi)有選擇它們，這是因?yàn)椋?/p>

1. 具有傳染性，比如一個(gè)函數(shù)用了 async，調(diào)用它的函數(shù)就要加上 async，有語(yǔ)法開銷，此外也會(huì)有性能上的額外開銷。
2. 無(wú)法在 generator 和 async/await 中恢復(fù)一些中間狀態(tài)。

具體見官方的 github issue 討論：

https://github.com/facebook/react/issues/7942#issuecomment-254987818。

Scheduler

做了時(shí)間分片，拆分了多個(gè)任務(wù)，React 就可以以此為基石，給任務(wù)設(shè)置優(yōu)先級(jí)。

React 實(shí)現(xiàn)了一個(gè) Scheduler（調(diào)度器）來(lái)實(shí)現(xiàn)任務(wù)調(diào)度執(zhí)行，并單獨(dú)抽離為一個(gè)單獨(dú)的包，它會(huì)在瀏覽器有空閑的時(shí)候執(zhí)行。其實(shí)瀏覽器也提供了一個(gè) requestIdleCallback 的 API，支持這個(gè)能力，但兼容性實(shí)在不好，React 還是自己實(shí)現(xiàn)了一套。

這個(gè) Scheduler 支持優(yōu)先級(jí)，底層使用了 小頂堆，確保能高效拿到最快要過(guò)期的任務(wù)，然后執(zhí)行它。

小頂堆，其實(shí)就是優(yōu)先級(jí)隊(duì)列。小頂堆在結(jié)構(gòu)上是一個(gè)完全二叉樹，但能保證每次從堆頂取出元素時(shí)，是最小的元素。

任務(wù)的 優(yōu)先級(jí) 分為幾種：

1. NoPriority：無(wú)優(yōu)先級(jí)。
2. ImmediatePriority：立即執(zhí)行。
3. UserBlockingPriority：用戶阻塞優(yōu)先級(jí)，不執(zhí)行可能會(huì)導(dǎo)致用戶交互阻塞。
4. NormalPriority：普通優(yōu)先級(jí)。
5. LowPriority：低優(yōu)先級(jí)。
6. IdlePriority：空閑優(yōu)先級(jí)。

React 自身也有優(yōu)先級(jí)，叫做 Lane，兩者是不同的。

結(jié)尾

React 的架構(gòu)過(guò)于宏大，今天先隨便說(shuō)一點(diǎn)吧。

總的來(lái)說(shuō)，React Fiber 是在 React 16 中引入的新的架構(gòu)，將原本同步不可中斷的更新，變成異步可中斷更新，將原本一個(gè)耗時(shí)的大任務(wù)做了時(shí)間分片，拆分成一個(gè)個(gè)小任務(wù)，在瀏覽器空閑的時(shí)間執(zhí)行。此外添加優(yōu)先級(jí)的概念，將一些重要的任務(wù)先執(zhí)行，比如一些用戶交互的響應(yīng)函數(shù)。

一切為了更好的用戶體驗(yàn)。