好問題 👍 你問的是 React Fiber 架構。這是 React 16 引入的核心機制，用來解決 React 在大規模更新時的性能問題。下面我給你從 背景 → Fiber 是什么 → 原理 → 優點 → 流程 來系統講。
一、為什么需要 Fiber？
在 React 15 及以前，Reconciler（協調器） 是 遞歸調用 的：
一旦開始遍歷虛擬 DOM 樹，就會一直執行到更新完成。
JS 是單線程的，如果組件樹很大，就會長時間阻塞 UI（比如用戶輸入、動畫掉幀）。
👉 React 16 引入 Fiber 架構，實現“可中斷的渲染”。
二、Fiber 是什么？
Fiber 既是數據結構，又是調度機制。
1. 數據結構（鏈表樹）
舊的虛擬 DOM 是樹形結構，Fiber 把它改造成 鏈表樹。
每個 Fiber 節點對應一個 React 組件，保存了：
type：組件類型（函數 / 類 / DOM 節點）pendingProps/memoizedProps：新舊 propsstateNode：真實 DOM 或類組件實例child/sibling/return：指向子節點、兄弟節點、父節點（讓樹可以“遍歷暫停+恢復”）。
2. 調度機制
Fiber 把渲染任務拆分成 小塊（unit of work）。
每完成一個小塊，就檢查是否有更高優先級的任務（比如用戶輸入）。
如果有 → 暫停渲染，先去執行高優先級任務；之后再恢復渲染。
👉 這就是所謂的 時間分片（Time Slicing）。
三、Fiber 的工作流程
React Fiber 的工作分 兩大階段：
1. 調和階段（Reconciliation / Render Phase）
生成新的 Fiber 樹（虛擬 DOM → Fiber 節點）。
可以被中斷（異步執行）。
做的事：
Diff 新舊 Fiber（比較新舊 props、state、子節點）。
標記需要的更新（Placement / Update / Deletion）。
2. 提交階段（Commit Phase）
把 Fiber 樹的變更同步到真實 DOM。
不能中斷（必須一次性完成）。
分三步：
Before Mutation：調用
getSnapshotBeforeUpdate。Mutation：操作 DOM（插入、更新、刪除）。
Layout：執行生命周期鉤子（
componentDidMount/useLayoutEffect）。
四、Fiber 的優點
可中斷渲染：解決 React 15 “一口氣渲染完”的問題。
優先級調度：不同更新任務有不同優先級（比如輸入比動畫更重要）。
增量渲染：一次渲染可以拆成多次完成。
為 Concurrent Mode（并發模式）打基礎：React 18 的并發特性基于 Fiber。
五、Fiber 更新優先級（Scheduler）
Fiber 為每個更新任務分配優先級：
Immediate：立即執行（比如點擊）。
User-blocking：高優先級（比如輸入）。
Normal：普通優先級。
Low：低優先級（比如數據預加載）。
Idle：空閑時才執行。
React 內部用 Scheduler（調度器） 來管理任務優先級。
六、整體流程總結
觸發更新（
setState/useState）。調度器接管 → 把更新放入任務隊列。
調和階段（可中斷）：構建新的 Fiber 樹，標記變更。
提交階段（不可中斷）：批量更新真實 DOM。
渲染完成，用戶看到更新。
七、類比理解
可以把 React Fiber 想象成：
舊版 React：寫一篇長文章時，必須一次寫完，不能停。
Fiber React：寫文章時，每寫幾句就停下來，看看是不是有人找你聊（高優先級任務），聊完再繼續寫文章。
)
_280)
