什么是虚拟 DOM？

React 创建了一个表示 DOM 一部分的自定义对象树。例如，它不是创建包含 UL 元素的实际 DIV 元素，而是创建一个包含 React.ul 对象的 React.div 对象。它可以非常快速地操作这些对象，而无需实际接触真正的DOM或通过DOM API。然后，当它渲染一个组件时，它使用此虚拟DOM来弄清楚它需要对真正的DOM做什么，以使两个树匹配。

您可以将虚拟 DOM 视为蓝图。它包含构建DOM所需的所有细节，但由于它不需要进入真实DOM的所有重量级部件，因此可以更轻松地创建和更改它。

让我们举个例子 - 尽管这是一个非常天真的例子：如果你家里的房间里有东西乱七八糟，你需要清理它，你的第一步是什么？你会打扫弄乱的房间还是整栋房子？答案肯定是，您将只清洁需要清洁的房间。这就是虚拟 DOM 的作用。

普通的JS遍历或渲染整个DOM，而不是只渲染需要更改的部分。

因此，每当您有任何更改时，例如您想要向DOM中添加另一个更改，那么将创建虚拟DOM，它实际上不会在实际的DOM中进行任何更改。现在，使用此虚拟 DOM，您将检查此 DOM 与当前 DOM 之间的差异。并且只会添加不同的部分（在本例中为新的），而不是重新渲染整个DOM。<div><div>