源碼基于react@16.13.1

Fiber 是一個(gè)工作單元，它的引入是react實(shí)現(xiàn)任務(wù)分片和時(shí)間分片的基礎(chǔ)。分片是為了在Reconciliation階段（純js計(jì)算，無(wú)DOM操作）一點(diǎn)一點(diǎn)地執(zhí)行任務(wù)，給瀏覽器喘息的機(jī)會(huì)，從而在體驗(yàn)上給用戶更流暢的使用感受。

任務(wù)分片

一個(gè)工作單元是什么？可以從代碼中直觀地理解。

import React from 'react'
import ReactDOM from 'react-dom'

function App() {
    return (
        <div>
            <h1>Title</h1>
            <p>
                <a href='#'>link</a>
            </p>
        </div>
    )
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />)

以上結(jié)構(gòu)，被react分解成了6個(gè)fiber，也就是6個(gè)工作單元，如下圖

react fiber

其中null對(duì)應(yīng)著fiber的根節(jié)點(diǎn)，雖然在視覺(jué)上是什么都看不見(jiàn)的，但它的確在內(nèi)存里。剩下的fiber節(jié)點(diǎn)都比較好理解。

每當(dāng)更新發(fā)生時(shí)，react會(huì)從fiber的根節(jié)點(diǎn)開始，一個(gè)一個(gè)地循環(huán)遍歷所有的fiber。

react 通過(guò)循環(huán)，一個(gè)一個(gè)地對(duì)fiber執(zhí)行performUnitOfWork操作，以此實(shí)現(xiàn)了任務(wù)分片。

時(shí)間分片

時(shí)間分片的邏輯藏在循環(huán)里。

//react-reconciler -> ReactFiberWorkLoop.js
function workLoopConcurrent() {
  // Perform work until Scheduler asks us to yield
  while (workInProgress !== null && !shouldYield()) {
    workInProgress = performUnitOfWork(workInProgress);
  }
}

performUnitOfWork可能返回null或者下一個(gè)需要被執(zhí)行的fiber，返回結(jié)果存在workInProgress中。workInProgress在react-reconciler模塊中是全局變量。

當(dāng)shouldYield返回true的時(shí)候，循環(huán)語(yǔ)句中斷，一個(gè)時(shí)間分片就結(jié)束了，瀏覽器將重獲控制權(quán)。

以下任意條件成立時(shí)，shouldYield會(huì)返回true

• 時(shí)間片到期（默認(rèn)5ms）
• 更緊急任務(wù)插隊(duì)

react 通過(guò)中斷任務(wù)循環(huán)，實(shí)現(xiàn)了時(shí)間分片。

任務(wù)恢復(fù)

循環(huán)中斷時(shí)，下一個(gè)未被完成的任務(wù)已經(jīng)被保存到react-reconciler模塊的全局變量workInProgress中。下一次循環(huán)開始時(shí)就從workInProgress開始。

跳出循環(huán)之后，react還做了一件事，通過(guò)MessageChannel發(fā)起了一個(gè)postMessage事件。

以上都發(fā)生在瀏覽器重獲控制權(quán)之前。

而監(jiān)聽這個(gè)事件的，正是循環(huán)的發(fā)起者performWorkUntilDeadline。

// scheduler.development.js
const performWorkUntilDeadline = () => {
    if (scheduledHostCallback !== null) {
      const currentTime = getCurrentTime();
      deadline = currentTime + yieldInterval;
      const hasTimeRemaining = true;
      try {
        // 通過(guò)scheduledHostCallback發(fā)起workLoopConcurrent循環(huán)
        const hasMoreWork = scheduledHostCallback(
          hasTimeRemaining,
          currentTime,
        );
        if (!hasMoreWork) {
          isMessageLoopRunning = false;
          scheduledHostCallback = null;
        } else {
          port.postMessage(null); // 發(fā)起postMessage事件
        }
      } catch (error) {
        port.postMessage(null);
        throw error;
      }
    } else {
      isMessageLoopRunning = false;
    }
    needsPaint = false;
  };

  const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;

循環(huán)中斷之后react執(zhí)行 port.postMessage 發(fā)起了一個(gè)message事件，并且通過(guò)事件監(jiān)聽又恢復(fù)了循環(huán)。在循環(huán)中斷到事件響應(yīng)的間隙，瀏覽器重獲了控制權(quán)，執(zhí)行必要的渲染工作（如果有的話）。

以上特性，目前只在開啟concurrent模式時(shí)有效。默認(rèn)模式下只有任務(wù)分片，但是是同步執(zhí)行的，所以不存在時(shí)間分片。

迅速搭建React源碼測(cè)試環(huán)境