⚡ 30 秒速记

• 核心判断：虚拟节点是对界面结构的描述，渲染器通过挂载与更新把声明式描述映射为宿主环境操作
• 原理主线：围绕 「快速搞定虚拟 DOM 的两个“大问题”」、「虚拟 DOM 是如何解决问题的」、「React 选用虚拟 DOM，真的是为了」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析虚拟DOM的原理、工作机制及其在React中的应用，阐述虚拟DOM如何通过JS对象描述真实DOM结构，实现高效的差量更新，并探讨虚拟DOM对前端开发体验和性能优化的实际影响，帮助开发者全面理解虚拟DOM的价值与局限。
• 边界与代价：key、节点类型和稳定序列决定复用边界；虚拟 DOM 解决可预测更新，不保证永远比手写 DOM 快
• 工程落地：性能分析要看实际提交次数、节点移动和组件边界，不能只用“减少 DOM 操作”解释

虚拟 DOM 是用 JavaScript 对象描述界面结构，再由渲染器把这份声明映射到真实宿主环境。 挂载时会创建并渲染整棵描述树，更新时则比较前后结构，把需要变化的部分应用到真实 DOM。它的核心价值是声明式开发和跨平台抽象，并不保证在所有场景下都比直接操作 DOM 更快。若界面几乎全量变化，diff 的计算成本可能抵消差量更新收益，因此性能结论必须结合具体场景验证。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

快速搞定虚拟 DOM 的两个“大问题”

虚拟 DOM（Virtual DOM）本质上是JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象

就这个示例来说，你需要把握住以下两点：

• 虚拟 DOM 是 JS 对象
• 虚拟 DOM 是对真实 DOM 的描述

我们看看 React 中的虚拟 DOM 大致是如何工作的

• 挂载阶段，React 将结合 JSX 的描述，构建出虚拟 DOM 树，然后通过 ReactDOM.render 实现虚拟 DOM 到真实 DOM 的映射（触发渲染流水线）；
• 更新阶段，页面的变化在作用于真实 DOM 之前，会先作用于虚拟 DOM，虚拟 DOM 将在 JS 层借助算法先对比出具体有哪些真实 DOM 需要被改变，然后再将这些改变作用于真实 DOM。

虚拟 DOM 是如何解决问题的

而在虚拟 DOM 的加持下，事情变成了这样：