Virtual DOM 虚拟 DOM

最后更新：2026-10-28

虚拟 DOM 是 React 在内存里维护的一棵轻量 JS 对象树，用来描述真实界面。状态变化时先「算出」新树、与旧树比对差异，再把差异提交到真实 DOM，用最小的代价完成界面更新。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

状态变化
  → 组件函数重新执行，生成新的虚拟 DOM 树
  → Diff：新旧两棵树逐层比对，找出差异
  → Commit：只把差异应用到真实 DOM

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

居中显示「数字」与「已重渲染 N 次」两行文字和一个按钮；每点一次两个数字同步加一，页面其余部分纹丝不动——直观展示「重渲染的是函数，DOM 只更新差异」。

ℹ️ 说明 虚拟 DOM 是实现声明式 UI 的手段而不是性能银弹；Diff 也遵循「同层比较」等启发式规则。

💡 提示 key 的稳定性直接影响 Diff 质量：稳定的 key 让 React 能复用已有节点，减少无谓操作。

⚠️ 注意 不要在渲染函数里手动操作真实 DOM，这会绕过虚拟 DOM 的更新机制，导致状态与界面不一致。

更多案例整理中，敬请期待。

Q 虚拟 DOM 一定比直接操作 DOM 快吗？

A 不一定。单次极限手写 DOM 操作可以更快；虚拟 DOM 的价值在于让「大量、频繁、可维护」的更新整体表现优秀，代码心智负担更低。

Q React 的 Diff 算法是怎么工作的？

A 采用启发式策略：不同类型的元素直接重建，同类型元素只更新变化的属性；同层子列表通过 key 判断复用、移动或删除。

Q key 和虚拟 DOM 有什么关系？

A 比对列表时，React 靠 key 把新旧节点一一对应起来；key 稳定就能正确复用节点，key 用 index 则可能错位更新。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。