React在内存中保留了真实DOM的轻量级表示，这被称为虚拟DOM。当一个对象的状态改变时，虚拟DOM只改变真实DOM中的那个对象，而不是更新所有对象。

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

您可以将虚拟DOM看作是一个蓝图。它包含了构建DOM所需的所有细节，但由于它不需要真正DOM中所有的重量级部分，因此可以更容易地创建和更改它。

React在内存中保留了真实DOM的轻量级表示，这被称为虚拟DOM。当一个对象的状态改变时，虚拟DOM只改变真实DOM中的那个对象，而不是更新所有对象。

让我们举个例子——虽然是一个很天真的例子:如果你家里的房间里有什么乱七八糟的东西，你需要清理它，你的第一步会是什么?你是要打扫你乱糟糟的房间，还是要打扫整个房子?答案肯定是，你只打扫需要打扫的房间。这就是虚拟DOM的作用。

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

所以当你有任何变化时，比如你想要添加另一个<div>到你的DOM，那么虚拟DOM将被创建，它实际上不会对实际DOM做任何改变。现在使用这个虚拟DOM，您将检查它与当前DOM之间的区别。并且只有不同的部分(在本例中是新的<div>)将被添加，而不是重新渲染整个DOM。

所有的答案都很棒。我只是想到了一个比喻，也许可以给一个现实世界的比喻。

真正的DOM就像你的房间，节点是你房间里的家具。虚拟DOM就像我们绘制当前房间的蓝图。

我们都有搬家具的经历，这很累(与在电脑中更新视图相同)。因此，每当我们想要改变位置/添加家具(节点)时，我们只想做非常必要的改变。

蓝图来拯救实现它。我们画了一个新的蓝图，并将其与原蓝图的差异进行比较。这让我们知道哪些部分被改变了，哪些部分保持不变。然后我们对真实的房间进行必要的更改(更新真实DOM上更改的节点)。华友世纪。

(有些人可能会想，为什么我们必须依赖虚拟的DOM，而不直接比较真实的DOM呢?在类比中，比较真实的DOM意味着您必须创建另一个真实的房间，并将其与原始的房间进行比较。只是太贵了。)

什么是虚拟DOM?

虚拟DOM是React组件在对页面进行任何更改之前生成的真实DOM元素的内存表示。

它是发生在渲染函数被调用和元素在屏幕上显示之间的一个步骤。

组件的渲染方法返回一些标记，但还不是最终的HTML。它是将成为真正元素的内存表示(这是第一步)，然后输出将被转换为真正的HTML，这是在浏览器中显示的内容(这是第2步)。

那么，为什么要进行所有这些操作来生成虚拟DOM呢? 简单的回答——这就是让反应更快的原因。它通过虚拟DOM差分来做到这一点。比较两个虚拟树(旧的和新的)，只对真正的DOM进行必要的更改。

来源自我的博客Intro To React #2