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

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

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

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

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

虚拟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来拯救的地方。

让我们把这件事理清楚。 React(或其他库)是javascript上的一个“层”。

没有所谓的虚拟王国， 有独立的dom。

让我用简单的javascript解释一下:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

在这一点上，我们已经创建了一个Div没有显示在dom，因为它 尚未附上

但是我们可以访问它，添加属性，值，改变等等。

一旦我们调用:(对于ex，将它添加到body)

    document.body.appendChild(vDom['newDiv'])

然后我们会看到它;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)

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

VDOM在战略上更新DOM，而不需要重新绘制单个页面应用程序中的所有节点。在树结构中找到一个节点很容易，但SPA应用程序的DOM树可能非常大。在事件发生时查找和更新一个/多个节点并不省时。

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

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

创建带有新状态的VDOM 将它与使用差分的旧VDOM进行比较。 只更新真实DOM中的不同节点。 将新的VDOM分配为旧的VDOM。

这是对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中执行。

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

您可以将虚拟DOM看作是一个蓝图。它包含了构建DOM所需的所有细节，但由于它不需要真正DOM中所有的重量级部分，因此可以更容易地创建和更改它。