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 之间的差异。并且只会添加不同的部分（在这种情况下是 new <div>），而不是重新渲染整个 DOM。

什么是虚拟DOM？

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

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

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

那么为什么要通过所有这些来生成虚拟 DOM？简单的答案——这就是快速react的原因。它通过虚拟 DOM 差异来实现。比较两个虚拟树——旧的和新的——并只对真实的 DOM 进行必要的更改。

来自 Intro To React #2

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

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

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

例如，考虑在 DOM 中添加一个节点；react 在内存中保留一份 VDOM 的副本

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

这是对经常与 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 之间还有细微的差异，包括出现在虚拟 DOM 中但没有出现在 HTML DOM 中的三个属性（key、ref 和危险的 SetInnerHTML）。

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

react元素

• 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'));

react组件

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

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

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