最近,我研究了Facebook的React框架。它使用了一个叫做“虚拟DOM”的概念,我并不真正理解这个概念。

什么是虚拟DOM?它的优点是什么?


当前回答

虚拟Dom是创建Dom的一个副本。虚拟dom与dom比较,虚拟dom只更新dom中发生变化的部分。它没有渲染整个dom它只是改变了dom中dom的更新部分。这是非常耗时的,从这个功能,我们的应用程序工作得很快。

其他回答

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

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

React在内存中保留了真实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它只是改变了dom中dom的更新部分。这是非常耗时的,从这个功能,我们的应用程序工作得很快。

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

从这里拍的。