第 20 卷

第 20 / 28 卷日期：2025-12-31

清理函数（callback 返回的函数，若有）；
将该节点加入 Hooks 链表。
首次渲染后：执行副作用回调：
组件首次渲染完成（DOM 更新并绘制后，useEffect 异步执行），React 遍历 Effect Hook 节点，

执行每个节点的 callback 函数；

若 callback 返回清理函数，将清理函数存储在 Hook 节点中，供后续使用。
重新渲染时：对比依赖并执行清理/回调：
组件重新渲染时，找到对应的 Effect Hook 节点；
对比新旧依赖数组（deps）：
若依赖数组变化（浅比较）：先执行上一次存储的清理函数，再执行新的 callback 函数，更新节

点中的依赖数组和清理函数；

若依赖数组未变化：不执行任何操作；
若依赖数组为空（[]）：仅在首次渲染时执行 callback，重新渲染时不执行。
组件卸载时：执行清理函数：
当组件被卸载时，React 遍历所有 Effect Hook 节点，执行每个节点存储的清理函数，清理副作用

（如清除定时器、移除事件监听），避免内存泄漏。

3. Hooks 原理的关键总结

核心载体：组件的 Fiber 节点，通过 memoizedState 存储 Hooks 链表；
关联方式：Hooks 的调用顺序与链表中的节点顺序一一对应，确保重新渲染时能正确匹配状态；
状态存储：每个 Hook 对应链表中的一个节点，节点存储状态值、更新队列、依赖项等信息；

• 更新机制：通过调用更新函数（如 setCount）将更新加入队列，触发组件重新渲染，遍历链表合

并更新并更新状态；

• 规则根源：Hooks 必须在顶层调用，是为了保证重新渲染时 Hooks 的调用顺序与首次渲染一致，

避免匹配错误的 Hook 节点。

三十、什么是 React Fiber？它如何改善了 React 应用的性能？

React Fiber 是 React 16 版本引入的「核心架构重构」，本质是一套“重新实现的协调引擎”（Reconciliation Engine）。它并非新增的 API，而是 React 内部用于处理组件渲染、更新的底

层机制，核心目标是解决 React 15 及之前版本中“同步渲染导致的页面卡顿问题”，通过“可中断、

中断的渲染流程」：

（1）同步渲染流程

当组件触发更新（如 setState、props 变化）时，React 会执行以下步骤：

1.「协调（Reconciliation）」：递归遍历新旧虚拟 DOM 树，通过 Diff 算法找出差异（这是一个递归过程，依赖调用栈）；

2.「提交（Commit）」：根据差异生成 DOM 操作指令，同步执行 DOM 更新。

关键问题：整个协调过程是「同步且不可中断」的。若应用存在复杂的组件树（如嵌套层级深、节点数量多），协调过程会占用主线程较长时间（如几百毫秒）。

（2）主线程阻塞导致卡顿

浏览器的主线程是“单线程”，负责执行 JavaScript、DOM 操作、布局、绘制等任务。若 React 的同步协调过程占用主线程过久，会导致浏览器无法及时响应用户交互（如点击、输入、滚动）、无法及

时绘制页面，从而出现页面卡顿、操作延迟等问题。

示例：当用户在复杂组件树中输入文字时，输入事件被 React 的同步协调过程阻塞，导致文字输入延迟，严重影响用户体验。

2. React Fiber 的核心设计：可中断的协调引擎

React Fiber 的核心思路是「将同步的递归协调，拆分为异步的、可中断的单元任务」，并引入「优先级调度」机制，让高优先级任务（如用户交互）能打断低优先级任务（如普通状态更新），待高优先

级任务执行完成后，再恢复低优先级任务。

Fiber 的名称来源于“光纤”，寓意“将大任务拆分为细小的单元，像光纤一样并行传输”。从技术角度，Fiber 既是“任务单元”，也是“组件的虚拟节点表示”（替代了 React 15 中的虚拟 DOM 节

点）。

（1）Fiber 节点：任务单元与组件状态的载体

每个 Fiber 节点对应一个组件，包含以下核心信息：

type：组件类型（如函数组件、类组件、原生 DOM 组件）；
memoizedState：组件的状态（如 Hooks 链表、类组件的 state）；
pendingProps/memoizedProps：待处理的 props 和已缓存的 props；

• child/sibling/return：指向子 Fiber 节点、兄弟 Fiber 节点、父 Fiber 节点（形成链表结

构，替代递归调用栈）；

effectTag：标记该组件需要执行的 DOM 操作（如插入、更新、删除）；

priority：该 Fiber 任务的优先级。

归，每个 Fiber 节点是一个独立的任务单元，便于中断和恢复。

（2）核心特性：可中断、可恢复、优先级调度

可中断的协调过程：
Fiber 将协调过程（Diff 算法）拆分为多个独立的任务单元（每个 Fiber 节点的处理是一个任务单

元）；

React 执行任务单元时，会定期检查是否有更高优先级任务需要执行，或是否超出浏览器分配的时

间切片（通常是 16ms，对应 60fps 的刷新率）；

若存在高优先级任务或时间切片用尽，React 会暂停当前任务，保存当前进度（如已处理的 Fiber

节点、任务状态），释放主线程；

待高优先级任务执行完成后，React 会恢复之前暂停的任务，从上次中断的位置继续处理，无需重

新开始整个协调过程。

优先级调度机制：
Fiber 为不同类型的更新任务划分了优先级（如用户输入、动画是高优先级，普通状态更新是低优

先级）；

调度器（Scheduler）会根据任务优先级排序，高优先级任务优先执行，确保用户交互、动画等关

键操作的响应速度；

低优先级任务可能被高优先级任务多次打断，直到没有高优先级任务时才完成执行。
分离协调与提交阶段：
协调阶段（Reconciliation）：异步、可中断，负责遍历 Fiber 树、执行 Diff 算法、标记需要更新

的 Fiber 节点（effectTag）；

提交阶段（Commit）：同步、不可中断，负责根据 Fiber 节点的 effectTag 执行 DOM 操作（插

入、更新、删除），并执行 useEffect 回调、组件生命周期方法等；

分离后，只有协调阶段可被中断，提交阶段因涉及真实 DOM 操作，必须同步执行，避免 DOM 状

态不一致。

Fiber 如何改善 React 应用的性能？

Fiber 通过解决 React 15 同步渲染的核心问题，从三个关键维度提升性能：

• 避免主线程阻塞，提升用户体验：

将不可中断的同步协调拆分为可中断的异步任务，确保主线程不会被长时间占用；

• 浏览器有足够时间响应用户交互（如点击、输入、滚动）、执行动画渲染，避免页面卡顿、操作延

全站分卷索引 · 28 卷