第 21 卷

• 优先级调度，保障关键任务优先执行：

• 为不同更新任务分配优先级，高优先级任务（如用户输入、动画）可打断低优先级任务，优先完成

执行；

• 例如：用户在输入框打字时，输入事件的优先级高于列表数据的普通更新，Fiber 会优先处理输入

更新，确保打字响应流畅，待输入完成后再继续处理列表更新。

• 减少不必要的计算，提升渲染效率：

• 可中断的协调过程避免了因任务阻塞导致的重复计算（如 React 15 中若同步协调被打断，重新触

发更新时需完全重新递归）；

• Fiber 节点的链表结构便于精准定位中断位置，恢复后继续处理，减少无效计算；同时，Fiber 对

Diff 算法的优化（如静态节点标记）也进一步提升了协调效率。

三十一、在 React Fiber 中，什么是 Fiber 节点？它如何与传统的 React

虚拟 DOM 元素相比？

1. 什么是 Fiber 节点？

在 React Fiber 架构中，Fiber 节点是 React 内部的「核心数据结构」，既是「组件状态与属性的载体」，也是「任务调度的基本单元」。它并非对外暴露的 API，而是 React 用于替代传统虚拟 DOM 元

素、实现可中断协调与优先级调度的底层基础。

每个 Fiber 节点对应一个组件（或原生 DOM 元素），包含以下核心信息（简化版）：

• 组件相关信息： type（组件类型，如函数组件、类组件、div 等原生 DOM 类型）、

pendingProps（待处理的 props）、 memoizedProps（已缓存的当前 props）；

• 状态相关信息： memoizedState（组件的状态数据，如类组件的 state、函数组件的 Hooks 链

表）；

• 链表结构信息： child（指向第一个子 Fiber 节点）、 sibling（指向兄弟 Fiber 节点）、

return（指向父 Fiber 节点），通过这三个属性形成完整的 Fiber 树（链表结构）；

• 任务调度信息： priority（当前 Fiber 节点对应的任务优先级）、 effectTag（标记需要执

行的 DOM 操作，如插入、更新、删除）、 nextEffect（指向需要执行副作用的下一个 Fiber 节点）；

• 其他辅助信息： alternate（指向当前 Fiber 节点的备用节点，用于存储更新过程中的临时状

态，实现双缓存机制）。

2. Fiber 节点与传统虚拟 DOM 元素的对比

传统的 React 虚拟 DOM 元素（React 15 及之前）是对真实 DOM 的「轻量级描述」，核心作用是用于 Diff 算法对比新旧 DOM 差异；而 Fiber 节点在继承虚拟 DOM 核心功能的基础上，新增了任务调

数据结构链表结构树状结构（递归嵌套），遍历（child/sibling/return），依赖调用栈，不可中断

支持遍历中断与恢复

核心功能1. 描述组件/ DOM 信息；2. 1. 描述组件/ DOM 信息；2.

执行 Diff 算法对比差异；3. 执行 Diff 算法对比差异存储组件状态

（state/Hooks）；4. 标记任务优先级与 DOM 操作；5. 支

持任务中断与恢复

Hooks 链表等

底层作用支撑 React 可中断协调、优先仅用于 Diff 算法对比，为级调度、双缓存渲染等核心机DOM 更新提供差异依据

制

3. 关键总结

Fiber 节点并非完全替代虚拟 DOM，而是在传统虚拟 DOM 的基础上进行了「功能增强与架构升级」：

传统虚拟 DOM 是“静态的描述性数据”，仅用于 Diff 对比；而 Fiber 节点是“动态的任务与状态载体”，既保留了虚拟 DOM 的 Diff 核心功能，又新增了链表结构、优先级调度、状态存储等能力，最终

支撑 React 实现可中断渲染，解决了传统同步渲染的卡顿问题。

三十二、React Fiber 的协调算法（Reconciliation）与之前的版本有何不

同？

React 的协调算法（Reconciliation）核心作用是「对比新旧组件树的差异，确定需要更新的部分」，是 DOM 更新的前置步骤。React Fiber 架构对协调算法进行了彻底重构，与 React 15 及之前的栈协调

器（Stack Reconciler）相比，核心差异在于「从同步不可中断的递归遍历，改为异步可中断的链表遍历」，并新增了优先级调度机制，具体不同可分为以下维度：

• React 15 协调算法（Stack Reconciler）：

• 采用「递归深度优先遍历」方式遍历虚拟 DOM 树，依赖 JavaScript 调用栈实现；

• 遍历过程是「同步且不可中断」的：一旦开始遍历，必须完整遍历整个组件树，直到找出所有差

异，期间无法释放主线程；

• 问题：若组件树层级深、节点多，遍历耗时过长（超过 16ms），会阻塞主线程，导致页面卡顿、

用户交互延迟。

• React Fiber 协调算法：

• 采用「链表遍历」方式遍历 Fiber 树，通过 Fiber 节点的 child（子）、 sibling（兄弟）、

return（父）三个属性实现遍历，替代了递归调用栈；

• 遍历过程是「异步且可中断」的：将整个遍历过程拆分为多个独立的任务单元（每个 Fiber 节点的

处理为一个任务单元），执行每个任务单元后，会检查是否有更高优先级任务或时间切片用尽，若有则暂停当前任务，保存进度后释放主线程；

• 优势：避免主线程长时间被占用，保障用户交互、动画等关键操作的流畅性。

2. 调度机制：无优先级 vs 优先级调度

• React 15 协调算法：

• 无优先级概念，所有更新任务“一视同仁”，按触发顺序同步执行；

• 问题：高优先级任务（如用户输入、动画）可能被低优先级任务（如普通数据更新）阻塞，导致关

键操作响应延迟。

• React Fiber 协调算法：

• 引入「优先级调度机制」，为不同类型的更新任务划分优先级（如 React 内部定义的

ImmediatePriority、UserBlockingPriority、NormalPriority 等）；

• 调度器（Scheduler）会根据任务优先级排序，高优先级任务可打断正在执行的低优先级任务，优

先完成；低优先级任务被打断后，会在高优先级任务执行完成后，从上次中断的位置恢复执行；

• 优势：确保用户交互、动画等关键任务优先响应，提升应用的交互体验。

3. 协调与提交阶段：未分离 vs 完全分离

• React 15 协调算法：

• 协调阶段（Diff 对比）与提交阶段（DOM 更新）未完全分离，递归遍历过程中可能穿插 DOM 操

作；

• 问题：进一步加剧主线程阻塞，且若遍历中断（如抛出异常），可能导致 DOM 状态不一致。

• React Fiber 协调算法：

• 将「协调阶段」与「提交阶段」完全分离：

• 协调阶段（Reconciliation）：异步、可中断，负责遍历 Fiber 树、执行 Diff 对比、标记需要执行