什么是虚拟DOM？

Question

最近我看了一下Facebook的React框架。它使用了一个名为“虚拟DOM”的概念，我并不是很了解这个概念。

什么是虚拟DOM？有什么优势？

Answer 1

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

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

Answer 2

让我们举个例子 - 尽管这是一个非常天真的例子：如果你的房子里有什么东西搞乱了，你需要清理它，那么你的第一步是什么？你会清理你的房间或整个房子吗？答案是肯定的，你将只清洁需要清洁的房间。这就是虚拟DOM的功能。

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

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

Answer 3

什么是虚拟DOM？

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

​​

就这么之间的渲染被调用函数，并在屏幕上元素的显示发生了一步。

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

那么为什么要通过所有这些来生成虚拟DOM？ 简单的答案 - 这可以让反应变得快速。它通过虚拟DOM差异来实现这一点。比较两个虚拟树 - 新旧虚拟树 - 并只对真实的DOM做必要的修改。

Source from Intro To React #2

Answer 4

虚拟DOM是HTML DOM选择性呈现基于状态改变的节点的子树的抽象。它尽可能减少DOM操作的数量，以便使组件保持最新状态。

Answer 5

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

VDOM策略性地更新DOM，无需重新绘制单个页面应用程序中的所有节点。在发束结构中查找节点非常简单，但是SPA应用程序的DOM树可能非常巨大。在发生事件时查找和更新节点/节点不是时间效率高的。

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

例如，考虑在DOM中添加节点;反应过来保持VDOM的副本存储在存储器

1. 一个新的状态
2. 使用版本比较旧的虚拟域进行比较它创建一个虚拟域。
3. 只更新实际DOM中的不同节点。
4. 将新VDOM分配为较旧的VDOM。

Answer 6

虚拟DOM如何工作？

想象一下，你有一个物体，你模仿一个人。它拥有一个人可能拥有的所有相关财产，并反映了当前状态的人。这基本上就是React用DOM做的事情。

现在想想如果你拿了那个物体并做了一些改变。加了一个小胡子，一些甜美的二头肌和Steve Buscemi的眼睛。在React-land，当我们应用这些变化时，会发生两件事情。首先，React运行一个“差异”算法，该算法确定发生了什么变化。第二步是对帐，其中它用diff的结果更新DOM。

React的工作方式，而不是采取真正的人，并从头开始重建它们，它只会改变面部和手臂。这意味着，如果您在输入中有文本并且发生了渲染，只要输入的父节点未安排调和，文本就会保持不受干扰。

因为React使用的是假的DOM，而不是真正的DOM，它也开辟了一种有趣的新的可能性。我们可以在服务器上渲染那个假的DOM，并且繁荣，服务器端的React视图。

Reference