# 虚拟 DOM 的作用 (简单说明)

1. 例如当 JSX 中的数据发生变化时，React 会自动调用 render 函数重新生成一个 ReactElement 对象，也就是虚拟 DOM，这时会有新老两个虚拟 DOM，然后使用 diff 算法对两个 DOM 进行比较，找出改变的部分，只对改变的部分进行更新。

2. 使用虚拟 DOM 可以，将要渲染的数据存在虚拟 DOM 中，然后根据不同平台实现不同的真实 DOM 的渲染。实现跨平台开发。

3. 虚拟 DOM 帮助我们从命令式编程转到了声明式编程的模式。

可以使用 root.render 让将虚拟 DOM 和真实 DOM 同步起来，这个过程叫做协调 (reconciliation)

React 的更新视图原理包括以下步骤：

1. 生成虚拟 DOM：React 将 UI 表示为一个虚拟 DOM 树，这个树是用 JavaScript 对象来表示的。

2. 生成新的虚拟 DOM：当有更改时，React 会生成一个新的虚拟 DOM 树。

3. 差异计算（Diffing）：React 会比较新旧虚拟 DOM 树，找出两者之间的差异。

4. 生成更新操作：根据差异生成更新操作。

5. 操作真实 DOM：将这些更新操作一次性应用到真实 DOM 上，进行必要的更新。

这种机制使得 React 可以高效地更新视图，只更新必要的部分，从而提升性能。