React 原理篇 - React 新架構深度解析

使用過 React v16 之前版本的開發者或許都經歷過這樣的場景：當頁面包含復雜組件或大量列表時，輸入框打字會卡頓，滾動會不流暢。這些體驗問題的背后，往往與 React 的渲染機制密切相關。2017 年 React v16 推出的 Fiber 架構，正是為解決這些核心問題而生。本文將系統解讀 React 新架構的演進之路。

一、舊架構的性能瓶頸：為什么會卡頓？

在 Fiber 出現之前，React 使用的是基于棧的遞歸協調（Stack Reconciler）機制。這種架構在處理復雜組件樹時，會暴露出難以克服的性能問題。

1.1 不可中斷的同步更新

JavaScript 是單線程語言，瀏覽器的渲染（UI 繪制）和腳本執行共用一個主線程。Stack Reconciler 采用深度優先遞歸方式比對虛擬 DOM，這種方式有一個致命缺陷：一旦開始執行，就必須等到整個組件樹處理完成才能釋放主線程。

想象一個包含 1000 個項目的列表：React 會從根組件開始，逐層遞歸處理每個子組件，整個過程無法暫停。如果這個過程耗時超過 16ms（瀏覽器每秒刷新 60 幀的時間間隔），就會阻塞渲染，導致頁面卡頓。用戶輸入、鼠標移動等交互事件也會因為主線程被占用而無法及時響應。

1.2 缺乏優先級區分

舊架構對所有更新一視同仁，無法區分任務的輕重緩急。例如：

用戶正在輸入搜索關鍵詞（高優先級，需要即時反饋）
同時頁面在后臺加載并渲染搜索結果（低優先級）

在 Stack 架構中，這兩個任務會搶占主線程，可能導致輸入框響應延遲，嚴重影響用戶體驗。

1.3 遞歸調用棧的限制

遞歸調用會形成一個連續的調用棧，棧的深度與組件樹的深度一致。當組件樹層級較深時，不僅容易導致棧溢出錯誤，更重要的是：JavaScript 引擎無法在遞歸過程中暫停執行某部分任務。這種機制使得 React 無法靈活應對運行時的各種情況，比如中途插入高優先級任務。

二、Fiber 架構：如何解決這些問題？

Fiber 架構的設計初衷，就是要打破 Stack Reconciler 的限制，實現 “可控的渲染過程”。它不是簡單的優化，而是一次底層架構的重構。

2.1 核心目標：實現可中斷、可恢復的更新

Fiber 架構通過兩大革新實現這一目標：

把渲染任務分解為小單元（每個單元對應一個組件的處理）
每個單元執行完成后，允許暫停、恢復甚至放棄執行

這樣，React 可以在處理完一個小單元后檢查：是否有更高優先級的任務需要處理？當前是否已經超過了瀏覽器的一幀時間？如果是，就先釋放主線程，等下一次機會再繼續執行。

2.2 數據結構革新：從遞歸樹到鏈表

Fiber 用鏈表結構替代了遞歸調用棧，每個 Fiber 節點就是一個工作單元。每個節點包含三個關鍵指針：

child：指向第一個子節點
sibling：指向兄弟節點
return：指向父節點

這種結構讓 React 可以像 “遍歷鏈表” 一樣處理組件樹，而不是依賴 JavaScript 引擎的調用棧。遍歷過程可以隨時暫停，因為當前進度可以通過這些指針被完整記錄（比如 “當前處理到哪個節點，下一個該處理哪個節點”）。

// Fiber節點簡化結構
const fiberNode = {type: 'div',        // 節點類型stateNode: domNode, // 對應的DOM節點child: null,        // 第一個子節點sibling: null,      // 兄弟節點return: null,       // 父節點// ...其他屬性（優先級、更新隊列等）
};

2.3 工作循環：分階段處理任務

Fiber 架構將渲染過程分為兩個階段，實現了 “計算” 與 “執行” 的分離：

調度階段（Reconciliation）
- 負責找出前后虛擬 DOM 的差異（Diffing）
- 為需要更新的節點打上標記（新增、刪除、修改）
- 可被中斷：如果有更高優先級任務，可以暫停當前計算
提交階段（Commit）
- 根據調度階段的標記，執行實際的 DOM 操作
- 調用組件生命周期函數或 Hooks（如useEffect）
- 不可中斷：確保 DOM 操作的原子性，避免頁面出現不一致狀態

這種分離設計，讓 React 可以在調度階段靈活調整執行順序，同時保證最終 DOM 更新的穩定性。

三、調度器（Scheduler）：讓任務有輕重緩急

僅有 Fiber 結構還不夠，還需要一個智能的調度系統來決定：什么時候該執行哪個任務？

3.1 優先級分級機制

React 調度器根據任務的緊急程度，將其分為不同優先級：

Immediate：同步執行，最高優先級（如用戶輸入）
UserBlocking：用戶交互相關（如點擊事件），需在 25ms 內完成
Normal：普通更新（如網絡請求后的渲染），500ms 內完成
Low：低優先級任務（如列表預加載），1000ms 內完成
Idle：空閑時執行（如日志上報），沒有時間限制

3.2 時間切片（Time Slicing）

調度器利用瀏覽器的requestIdleCallback或setTimeout模擬時間切片，確保每個任務單元的執行不超過 5ms-10ms。每處理完一個單元，就檢查是否超時或有更高優先級任務：

function workLoop() {// 只要有任務且未超時，就繼續執行while (nextUnitOfWork && !shouldYield()) {nextUnitOfWork = performUnitOfWork(nextUnitOfWork);}
}// 判斷是否需要讓出主線程
function shouldYield() {return performance.now() >= deadline; // deadline是當前時間切片的截止時間
}

這種機制保證了主線程不會被長時間占用，瀏覽器有機會處理用戶輸入和渲染，從而避免卡頓。

四、雙緩沖機制：提升渲染效率

Fiber 架構通過維護兩棵樹來優化渲染性能：

current 樹：當前顯示在頁面上的 Fiber 樹，與 DOM 節點一一對應
workInProgress 樹：正在構建的新樹，基于最新狀態計算

當開始更新時，React 會以 current 樹為基礎，創建 workInProgress 樹。對于不需要變更的節點，直接復用（通過alternate指針關聯）；需要更新的節點，創建新的 Fiber 節點。全部計算完成后，只需將根節點的指針從 current 樹切換到 workInProgress 樹，就能完成一次高效的更新。

這種 “雙緩沖” 策略避免了頻繁創建和銷毀節點的開銷，同時確保了 DOM 更新的原子性（用戶不會看到中間狀態）。

五、新架構帶來的開發模式變革

Fiber 架構不僅解決了性能問題，更為 React 引入了新的開發能力，這些能力在 React 18 中得到了全面強化。

5.1 并發更新（Concurrent Updates）

在并發模式下，React 可以同時準備多個版本的 UI（比如快速輸入時的多個中間狀態），但只提交最終版本。這使得應用能在復雜計算的同時保持響應性。

import { startTransition } from 'react';// 輸入框實時搜索示例
function Search() {const [input, setInput] = useState('');const [results, setResults] = useState([]);function handleChange(e) {setInput(e.target.value);// 標記搜索結果更新為低優先級startTransition(() => {setResults(searchApi(e.target.value));});}return (<div><input value={input} onChange={handleChange} /><ResultsList results={results} /></div>);
}