虚拟 DOM

Source: Dev.to

什么是 Virtual DOM？

Virtual DOM（VDOM）是对真实 DOM 的轻量级、内存中的表示。
它像真实 DOM 树的数字副本，允许在更新真实 DOM 之前将更改与之前的版本进行比较。

• Virtual – 以数字形式存在的东西，虽然不是实体的，但模仿真实对象。
• DOM（文档对象模型） – 一种编程接口，将 HTML 文档表示为对象树。

VDOM 高效地跟踪这份轻量副本中的变化，并确定真实 DOM 所需的最小更新集合。

为什么会有 Virtual DOM？

直接更新真实 DOM 可能很慢，因为它往往需要重新渲染页面的大块区域，即使是微小的改动（例如更改一个单词）。Virtual DOM 通过以下方式解决这个问题：

• 减少不必要的更新 – 只修改实际改变的 UI 部分。
• 提升性能 – 更少的 DOM 操作意味着更快、更流畅的网页应用。
• 提供可预测的更新周期 – 更改会被批量处理并以优化的方式应用。

现实世界的类比

• 真实 DOM → 直接在期末考试卷子上写（每一次改动都需要重新写整页）。
• Virtual DOM → 在草稿上工作，然后只把必要的编辑复制到正式卷子上。

Virtual DOM 在 React 中的工作原理

当组件的状态改变（例如点击 Increment 或 Decrement 按钮）时，React：

1. 使用 useState 更新组件的状态。
2. 在内存中创建 UI 的新虚拟表示。
3. 将这个新 VDOM 树与之前的树进行比较（此过程称为 reconciliation，调和）。
4. 确定所需的最小更改集合。
5. 仅将这些更改应用到真实 DOM。

这种选择性更新让应用感觉快速且流畅，因为只有必要的 UI 部分（例如计数文本）会重新渲染，而不是整个页面。

---

关键要点： 操作 Virtual DOM 优于直接操作真实 DOM，因为它能最小化工作量、提升性能，并提供更平滑的用户体验。