什么是Virtual 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进行必要的更改.

来自Intro To React#2的来源

Answer 4

一个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。

Answer 5

所有的答案都很棒。我刚刚想出了一个可能可以给出现实世界隐喻的类比。

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

我们都有搬家具的经历，很累（和电脑里更新视图是一样的概念）。因此，每当我们想要改变位置/添加家具（节点）时，我们只想做非常必要的改变。

蓝图的到来是为了实现这一目标。我们画了一张新的蓝图，并与原来的蓝图进行比较。这让我们知道哪些部分已更改以及哪些部分保持不变。然后我们对真实房间进行必要的更改（更新真实 DOM 上已更改的节点）。欢呼。

（有人可能会想，为什么我们必须依赖虚拟的房间而不直接比较真实的 DOM？好吧，打个比方，比较真实的 DOM 意味着你必须创建另一个真实的房间并将其与你原来的房间进行比较. 成本太高了。）

Answer 6

这是对经常与 ReactJS 一起提到的 Virtual DOM 的简要描述和重申。

DOM（文档对象模型）是对结构化文本的抽象，这意味着它由 HTML 代码和 css 组成。这些 HTML 元素成为 DOM 中的节点。以前操作 DOM 的方法存在局限性。虚拟 DOM 是在 React 被创建或使用之前创建的文字 HTML DOM 的抽象，但出于我们的目的，我们将与 ReactJS 一起使用它。Virtual DOM 是轻量级的，并且与浏览器中的 DOM 实现分离。虚拟 DOM 本质上是给定时间 DOM 的屏幕截图（或副本）。从开发人员的角度来看，DOM 是生产环境，虚拟 DOM 是本地（开发）环境。每次 React 应用程序中的数据更改时，都会创建用户界面的新虚拟 DOM 表示。

在 ReactJS 中创建静态组件所需的最基本方法是：

您必须从 render 方法返回代码。您必须将每个类转换为 className，因为 class 是 JavaScript 中的保留字。除了更重大的变化之外，两个 DOM 之间还有细微的差异，包括出现在 Virtual DOM 中但没有出现在 HTML DOM 中的三个属性（key、ref 和危险的SetInnerHTML）。

使用 Virtual DOM 时需要了解的一件重要事情是 ReactElement 和 ReactComponent 之间的区别。

反应元素

• ReactElement 是 DOM 元素的轻量级、无状态、不可变的虚拟表示。
• ReactElement - 这是 React 中的主要类型，驻留在 Virtual DOM 中。

• ReactElements 可以渲染成 HTML DOM

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX 将 HTML 标签编译成 ReactElements

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

反应组件

• ReactComponent - ReactComponent 是有状态的组件。
• React.createClass 被认为是一个 ReactComponent。
• 每当状态改变时，组件都会重新渲染。

每当 ReactComponent 的状态发生变化时，我们都希望对 HTML DOM 进行尽可能少的更改，以便将 ReactComponent 转换为 ReactElement，然后将其插入到虚拟 DOM 中，快速轻松地进行比较和更新。

当 React 知道差异时 - 它被转换为低级（HTML DOM）代码，在 DOM 中执行。

Answer 7

它\xe2\x80\x99 是一个简洁的概念：不是直接操作 DOM（容易出错且依赖于可变状态），而是输出一个称为虚拟 DOM 的值。然后，虚拟DOM与 DOM 的当前状态进行比较，生成一个 DOM 操作列表，使当前 DOM 看起来像新的 DOM。这些操作可以批量快速应用。

\n

取自这里。

\n