这是一个简洁的概念:不直接操作DOM(容易出错并且依赖于可变状态)，而是输出一个名为Virtual DOM的值。然后，虚拟DOM与DOM的当前状态进行区分，这会生成一个DOM操作列表，使当前DOM看起来像新DOM。这些操作在批量中快速应用。

从这里拍的。

什么是虚拟DOM?

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

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

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

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

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

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

您可以将虚拟DOM看作是一个蓝图。它包含了构建DOM所需的所有细节，但由于它不需要真正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就像你的房间，节点是你房间里的家具。虚拟DOM就像我们绘制当前房间的蓝图。

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

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

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

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

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

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

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

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