深入理解React Fiber機(jī)制

更新時(shí)間：2026年06月11日 08:19:42 作者：卷簾依舊

React Fiber 是 React 16 引入的核心協(xié)調(diào)算法重構(gòu),它解決了舊版 Stack Reconciler 的不可中斷、同步遞歸導(dǎo)致的卡頓問題,下面就來詳細(xì)的介紹一下

一、為什么需要 Fiber？（痛點(diǎn)分析）

舊版 React（<16）的 Stack Reconciler 有致命缺陷：

同步遞歸：遍歷整個(gè)虛擬 DOM 樹時(shí)，一旦開始就無法停止。
阻塞主線程：如果組件層級(jí)很深（幾百個(gè)），一次更新可能占用 100ms+ 的 JS 執(zhí)行時(shí)間。
導(dǎo)致掉幀：瀏覽器需要 16.6ms 渲染一幀（60fps），而 React 長(zhǎng)期霸占主線程，用戶點(diǎn)擊、動(dòng)畫都會(huì)卡頓。

典型案例：一個(gè)輸入框綁定大列表更新，每次按鍵都重新渲染整個(gè)列表，造成明顯延遲。

Fiber 的目標(biāo)就是：把同步不可中斷的工作，拆解成異步可中斷的小任務(wù)單元。

二、Fiber 的核心機(jī)制

1. Fiber 是什么？（數(shù)據(jù)結(jié)構(gòu) + 工作單元）

Fiber 既是數(shù)據(jù)結(jié)構(gòu)，也是執(zhí)行單元：

作為數(shù)據(jù)結(jié)構(gòu)：每個(gè) React 元素對(duì)應(yīng)一個(gè) Fiber 節(jié)點(diǎn)，構(gòu)成 Fiber 樹（鏈表結(jié)構(gòu)，而非樹）。

// Fiber 節(jié)點(diǎn)的核心字段
{
  tag: 5,               // 節(jié)點(diǎn)類型（函數(shù)組件、類組件、DOM等）
  key: null,
  type: 'div',
  return: parentFiber,  // 指向父 Fiber（完成后的返回目標(biāo)）
  child: childFiber,    // 指向第一個(gè)子 Fiber
  sibling: siblingFiber,// 指向下一個(gè)兄弟 Fiber
  pendingProps: {},     // 新傳入的 props
  memoizedProps: {},    // 上次渲染的 props
  memoizedState: null,  // 上次渲染的 state（用于 Hooks）
  alternate: null,      // 雙緩存中的另一個(gè) Fiber（current <-> workInProgress）
}

作為執(zhí)行單元：Fiber 節(jié)點(diǎn)記錄了自身的「進(jìn)度信息」，React 可以在中斷后從任意 Fiber 繼續(xù)工作。

2. 雙緩存機(jī)制（Double Buffering）

React 維護(hù)兩棵 Fiber 樹：

current 樹：當(dāng)前屏幕上顯示的內(nèi)容（已提交到 DOM）。
workInProgress 樹：在內(nèi)存中構(gòu)建的新樹，代表下一次要顯示的界面。

工作流程：

觸發(fā)更新時(shí)，克隆 current 樹生成 workInProgress 樹。
在 workInProgress 樹上進(jìn)行協(xié)調(diào)（diff + 標(biāo)記副作用）。
構(gòu)建完成后，commitRoot 將 workInProgress 樹切換為 current 樹（一次指針切換）。
復(fù)用 alternate 屬性指向另一棵樹，節(jié)省內(nèi)存分配。

好處：可以在構(gòu)建過程中隨時(shí)放棄 workInProgress 樹，不影響用戶當(dāng)前看到的界面。

3. 調(diào)度與優(yōu)先級(jí)（Scheduler）

Fiber 搭配了獨(dú)立的調(diào)度器（Scheduler），實(shí)現(xiàn)了時(shí)間切片和優(yōu)先級(jí)隊(duì)列。

任務(wù)拆分：將協(xié)調(diào)過程拆解為多個(gè)「工作單元」（每個(gè) Fiber 節(jié)點(diǎn)的處理就是一個(gè)單元）。
時(shí)間切片：每次循環(huán)檢查是否還有剩余時(shí)間（shouldYield），超時(shí)則中斷并讓出主線程。
優(yōu)先級(jí)機(jī)制：
- 離散事件（click、input）：立即同步執(zhí)行（最高優(yōu)先級(jí)）。
- 連續(xù)事件（scroll、拖拽）：下一幀之前執(zhí)行（高優(yōu)先級(jí)）。
- 數(shù)據(jù)請(qǐng)求（useEffect、Suspense fallback）：可中斷的低優(yōu)先級(jí)。
- startTransition 標(biāo)記的更新：最低優(yōu)先級(jí)，空閑時(shí)執(zhí)行。

簡(jiǎn)單模擬調(diào)度流程：

// 簡(jiǎn)化的 workLoop
function workLoop(deadline) {
  let shouldYield = false;
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork); // 處理一個(gè) Fiber
    shouldYield = deadline.timeRemaining() < 1;         // 剩余時(shí)間不足 1ms 則中斷
  }
  if (nextUnitOfWork) {
    requestIdleCallback(workLoop); // 有空閑時(shí)間再繼續(xù)
  } else {
    commitRoot(); // 全部完成，提交 DOM
  }
}
requestIdleCallback(workLoop);

三、Fiber 架構(gòu)下的兩個(gè)階段

React 將渲染過程拆解為兩個(gè)截然不同的階段：

階段	執(zhí)行內(nèi)容	是否可中斷	是否執(zhí)行副作用	常見方法
Render/Reconciliation	構(gòu)建 Fiber 樹、計(jì)算 diff、標(biāo)記副作用	? 可中斷	?	`render`、`shouldComponentUpdate`、hooks 中的更新計(jì)算
Commit	將副作用應(yīng)用到真實(shí) DOM、執(zhí)行生命周期	? 不可中斷	?	`componentDidMount`、`useLayoutEffect`、`ref` 更新

重要區(qū)別：

Render 階段可以被打斷（比如用戶點(diǎn)擊新的高優(yōu)先級(jí)事件），React 會(huì)丟棄當(dāng)前 workInProgress 樹，重新開始。
Commit 階段必須同步完成，確保 DOM 一致性和用戶看到的結(jié)果。

這也解釋了為什么 componentWillMount 和 componentWillUpdate 被標(biāo)記為不安全 —— 它們可能在 Render 階段被多次調(diào)用或中斷。

四、Fiber 帶來的具體能力

Concurrent Mode（并發(fā)模式，現(xiàn)為默認(rèn)啟用）：渲染和用戶輸入并行處理，不再互相阻塞。
Suspense：等待異步數(shù)據(jù)（代碼、圖片、數(shù)據(jù)）時(shí)，渲染 fallback，數(shù)據(jù)就緒后繼續(xù) Fiber 工作。
useDeferredValue / startTransition：將低優(yōu)先級(jí)更新標(biāo)記為可中斷，保障高優(yōu)先級(jí)響應(yīng)的流暢度。
錯(cuò)誤邊界：通過 componentDidCatch 捕獲子組件樹的錯(cuò)誤，防止整個(gè)應(yīng)用崩潰。