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

The DOM (Document Object Model) is an abstraction of structured text, which means it is made of HTML code and css. These HTML elements become nodes in the DOM. There are limitations to the previous methods of manipulating the DOM. Virtual DOM is an abstraction of the literal HTML DOM created well before React was created or used, but for our purposes we will use it in concert with ReactJS. The Virtual DOM is lightweight and detached from the DOM implementation in the browser. The Virtual DOM is essentially a screenshot (or copy) of the DOM at a given time. A way to look at it from a developers perspective is the DOM is the production environment and the Virtual DOM is the local (dev) environment. Each time the data changes in a React app a new Virtual DOM representation of the user interface is created.

为了在ReactJS中创建静态组件，最基本的方法是:

必须从呈现方法返回代码。 您必须将每个类转换为className，因为class是JavaScript中的保留字。 除了更大的变化之外，两个DOM之间还有一些小差异，包括虚拟DOM中出现而HTML DOM中没有出现的三个属性(key、ref和dangerlysetinnerhtml)。

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

ReactElement

ReactElement是DOM元素的轻量级、无状态、不可变的虚拟表示。 ReactElement -这是React中的主要类型，位于Virtual DOM中。 ReactElements可以被渲染成HTML DOM var root = React.createElement('div'); ReactDOM。呈现(根,. getelementbyid(例子)); JSX将HTML标记编译为ReactElements Var root = <div/>; ReactDOM。呈现(根,. getelementbyid(例子));

ReactComponent

ReactComponent——ReactComponent是有状态的组件。 反应。createClass被认为是一个ReactComponent。 每当状态改变时，组件都会被重新呈现。

每当ReactComponent发生状态变化时，我们希望对HTML DOM的更改尽可能少，这样ReactComponent就可以转换为ReactElement，然后ReactElement可以插入到Virtual DOM中，快速方便地进行比较和更新。

当React知道diff时，它会被转换为低级代码(HTML DOM)，并在DOM中执行。

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

什么是虚拟DOM?

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

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

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

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

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

虚拟DOM是浏览器DOM树结构的部分或完整副本。它是由React等框架创建的，并保存在内存中，以便通过应用程序代码进行操作。

在必要时，应用程序代码使用虚拟DOM来更新浏览器DOM——实际表示用户界面的DOM。

此外，值得注意的是，Virtual DOM只是一种设计模式，任何人都可以实现，甚至可以使用纯javascript。

React在将应用状态更改推送到真正的DOM之前对这些更改进行批处理。最新的虚拟DOM差分为React提供了所有受影响的节点。然后，通过一个称为协调的高效进程将受影响的虚拟DOM节点推到真实DOM。

下图展示了React中虚拟DOM与真实DOM的差异和调和

在这里阅读更多- React虚拟DOM的例子解释

优势- - - - - - 请注意，当你在DOM树中添加、删除或修改一个节点时，浏览器需要执行计算并调整屏幕布局和内容，以使用户界面与应用程序状态同步。在高度复杂、响应式和交互式的应用程序中，您会看到持续的数据和事件流，DOM可能需要频繁更新。

频繁更新DOM(和重绘浏览器屏幕)是一个大问题，这就是React js中的虚拟DOM来拯救的地方。

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

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

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

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

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

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

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

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