第 22 卷

• 提交阶段（Commit）：同步、不可中断，负责根据协调阶段标记的 effectTag，批量执行真实

• 优势：协调阶段的异步可中断特性不会影响真实 DOM 状态，提交阶段的同步执行确保 DOM 操作

的原子性，避免 DOM 状态混乱。

4. 性能优化：无缓存 vs 双缓存机制

• React 15 协调算法：

• 无缓存机制，每次更新都需要重新创建完整的虚拟 DOM 树，再与旧树进行 Diff 对比；
• 问题：重复创建虚拟 DOM 树增加内存开销，Diff 对比效率较低。

• React Fiber 协调算法：

• 引入「双缓存机制」，通过 Fiber 节点的 alternate 属性维护两棵 Fiber 树：

• current 树：当前渲染在页面上的 Fiber 树，与真实 DOM 一一对应；

• workInProgress 树：正在进行更新的 Fiber 树，用于执行 Diff 对比、标记 effectTag，更新过程中

不会影响 current 树；

• 更新完成后，通过切换 current 树与 workInProgress 树的引用，完成 DOM 更新，旧的 current

树变为下一次更新的 workInProgress 树；

• 优势：避免重复创建 Fiber 节点，减少内存开销；同时，workInProgress 树的异步构建不会影响

当前页面的渲染状态，提升稳定性。

5. 关键总结

React Fiber 的协调算法是对传统栈协调器的「颠覆性重构」，核心目标是「解决同步渲染的卡顿问题」。通过“链表遍历替代递归遍历”“引入优先级调度”“分离协调与提交阶段”“双缓存机

制”四大核心优化，实现了异步可中断的协调过程，既保障了关键操作的响应速度，又提升了渲染效率与稳定性。

三十三、什么是虚拟 DOM？以及它如何帮助提升 React 应用的性能？

1. 什么是虚拟 DOM？

虚拟 DOM（Virtual DOM，简称 VDOM）是 React 等前端框架中用于「描述真实 DOM 结构的轻量级 JavaScript 对象」，是对真实 DOM 的抽象映射。它不直接操作浏览器的真实 DOM，而是通过对象的

形式记录真实 DOM 的关键信息（如节点类型、属性、子节点等），本质是“在内存中模拟 DOM 树的结构”。

例如，一个真实的 div 节点：

对应的虚拟 DOM 对象（简化版）可能是：

Code block

1{

核心特点：

• 轻量级：仅包含真实 DOM 的必要信息，不包含浏览器 DOM 节点的复杂属性与方法，操作成本远

低于真实 DOM；

• 内存中存在：虚拟 DOM 是 JavaScript 对象，存储在内存中，操作时不会触发浏览器的重排

（Reflow）与重绘（Repaint）；

• 可描述性：完整映射真实 DOM 的层级结构与属性信息，能够精准描述页面的 UI 状态。

1. 虚拟 DOM 如何提升 React 应用的性能？

浏览器操作真实 DOM 的成本极高（尤其是重排/重绘），而虚拟 DOM 通过「减少真实 DOM 的操作次数」和「最小化 DOM 更新范围」，显著提升 React 应用的性能，具体优化逻辑可分为三个核心步骤：

（1）避免频繁操作真实 DOM，减少重排/重绘

在传统原生 JavaScript 开发中，若需要频繁更新页面（如列表数据刷新、表单输入联动），会直接多次操作真实 DOM，每次操作都会触发浏览器的重排/重绘，导致性能开销巨大。

虚拟 DOM 的优化逻辑：

• React 中所有的 UI 更新都会先操作虚拟 DOM（内存中的 JavaScript 对象），而非直接操作真实

• 多次虚拟 DOM 操作会被合并为一次真实 DOM 更新，避免了频繁操作真实 DOM 导致的多次重排/

• 例如：连续修改一个元素的 className 和文本内容，React 会先在虚拟 DOM 中完成两次修改，再

通过一次真实 DOM 操作同步到页面，而非两次独立的 DOM 操作。

（2）通过 Diff 算法，最小化 DOM 更新范围

当应用状态变化时，React 会创建一棵新的虚拟 DOM 树，然后通过「Diff 算法」对比新旧两棵虚拟 DOM 树的差异，找出“需要更新的最小部分”，仅将差异部分同步到真实 DOM 中，而非整体替换整

个 DOM 树。

核心优势：

• 传统 DOM 更新可能需要替换整个父节点及其所有子节点，即使只有一个子节点变化；

• 虚拟 DOM + Diff 算法能精准定位变化的节点，仅更新变化的部分，避免了不必要的 DOM 操作，极

大降低了性能开销；

• 例如：列表中某一个列表项的文本变化，React 会通过 Diff 算法找到该列表项对应的虚拟 DOM 节

点，仅更新该节点的文本内容，而不影响列表中的其他节点。

（3）抽象 DOM 操作，提升开发效率与跨平台能力

虚拟 DOM 对 DOM 操作进行了抽象封装，开发者无需直接编写 DOM 操作代码，只需关注应用状态与 UI 的映射关系（如编写 JSX），React 会自动完成虚拟 DOM 到真实 DOM 的同步。

间接性能优化：

• 减少开发者手动编写低效 DOM 操作代码的可能性（如冗余的 DOM 查询、重复的 DOM 修改）；

• 虚拟 DOM 是平台无关的抽象层，除了映射浏览器 DOM，还可映射到其他平台（如 React Native

中的原生组件），实现“一次编写，多平台运行”，避免了为不同平台单独优化 DOM 操作的成本。

3. 注意事项：虚拟 DOM 并非“更快”，而是“更高效”

虚拟 DOM 本身存在一定的性能开销（如创建虚拟 DOM 对象、执行 Diff 算法），因此对于简单的、单次的 DOM 操作，虚拟 DOM 的性能可能不如直接操作真实 DOM。但在复杂应用中，虚拟 DOM 通

过“合并操作”和“最小化更新”带来的性能优势，远大于其自身的开销，整体提升应用的性能与可维护性。

三十四、React 的 Diff 算法是如何工作的（也称为 Reconciliation 算

法）？请解释它如何比较两个虚拟 DOM 树的。

React 的 Diff 算法（又称协调算法/Reconciliation 算法）是 React 核心优化机制之一，核心目标是「高效对比新旧两棵虚拟 DOM 树的差异，找出需要更新的最小部分」，从而最小化真实 DOM 的操