什么是虚拟DOM？

虚拟Dom被创建为Dom的一个副本。将虚拟dom与dom进行比较，虚拟dom仅更新dom中已更改的部分。它并没有渲染整个dom，而只是改变了dom中dom的更新部分。这非常耗时，而且通过此功能，我们的应用可以快速运行。

虚拟DOM是HTML DOM的抽象，它根据状态变化有选择地呈现节点的子树。它执行最少的DOM操作量，以使组件保持最新状态。

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

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

让我们举个例子-一个非常幼稚的例子：如果您家里的房间里有东西弄乱了，需要打扫一下，那么第一步是什么呢？您会打扫房间还是整间房子？肯定的答案是，您将只打扫需要打扫的房间。这就是虚拟DOM所做的。

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

因此，无论何时进行任何更改（例如要向<div>DOM中添加其他更改），都会创建虚拟DOM，而该虚拟DOM实际上不会对实际DOM进行任何更改。现在，使用此虚拟DOM，您将检查此虚拟DOM与当前DOM之间的区别。并且仅添加不同的部分（在本例中为new <div>），而不是重新渲染整个DOM。

这是一个简洁的概念：与其直接操作DOM（它容易出错，而且依赖于可变状态），而不是直接操作DOM，而是输出一个称为Virtual DOM的值。该虚拟DOM，然后显示差异与DOM，它产生的DOM操作，这将使当前的DOM看起来像新的列表的当前状态。这些操作可以快速批量应用。

从这里拍摄。

什么是虚拟DOM？

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

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

组件的render方法返回一些标记，但它不是最终的HTML。它是将成为真实元素的内存表示形式（这是第1步）。然后，该输出将转换为真实的HTML，这就是在浏览器中显示的内容（这是第2步）。

那么，为什么要经历所有这些以生成虚拟DOM？简单的答案-这就是使反应迅速的原因。它通过虚拟DOM差异来做到这一点。比较两个虚拟树-旧树和新树-并仅对真实DOM进行必要的更改。

来自Intro To React＃2

一个virtual DOM（虚拟域）是不是一个新概念：https://github.com/Matt-Esch/virtual-dom。

VDOM在策略上是更新DOM而不重画单个页面应用程序中的所有节点的方法。在发束结构中查找节点很容易，但是SPA应用程序的DOM树可能非常庞大。在发生事件的情况下查找和更新一个或多个节点不是很节省时间。

VDOM通过创建实际dom的高标签抽象来解决此问题。VDOM是实际DOM的高级轻量级内存树表示。

例如，考虑在DOM中添加节点；反应在内存中保留VDOM的副本

1. 创建具有新状态的VDOM
2. 使用比较将其与较旧的VDOM进行比较。
3. 仅更新真实DOM中的不同节点。
4. 将新的VDOM分配为旧的VDOM。