最近,我研究了Facebook的React框架。它使用了一个叫做“虚拟DOM”的概念,我并不真正理解这个概念。
什么是虚拟DOM?它的优点是什么?
最近,我研究了Facebook的React框架。它使用了一个叫做“虚拟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。
其他回答
让我们举个例子——虽然是一个很天真的例子:如果你家里的房间里有什么乱七八糟的东西,你需要清理它,你的第一步会是什么?你是要打扫你乱糟糟的房间,还是要打扫整个房子?答案肯定是,你只打扫需要打扫的房间。这就是虚拟DOM的作用。
普通JS遍历或呈现整个DOM,而不是只呈现需要更改的部分。
所以当你有任何变化时,比如你想要添加另一个<div>到你的DOM,那么虚拟DOM将被创建,它实际上不会对实际DOM做任何改变。现在使用这个虚拟DOM,您将检查它与当前DOM之间的区别。并且只有不同的部分(在本例中是新的<div>)将被添加,而不是重新渲染整个DOM。
虚拟Dom是创建Dom的一个副本。虚拟dom与dom比较,虚拟dom只更新dom中发生变化的部分。它没有渲染整个dom它只是改变了dom中dom的更新部分。这是非常耗时的,从这个功能,我们的应用程序工作得很快。
React的结构单元是组件。每个组件都有一个状态。每当组件的状态发生变化时,React都会修改V-DOM树。然后,将最新版本的V-DOM与以前版本的V-DOM进行比较。经过这个计算(差分)后,当React知道哪些V-DOM对象被更改时,它只修改R-DOM中的那些对象。
通俗地说,
假设我在DOM中添加了一个div元素,React会在不改变整个R-DOM的情况下创建一个V-DOM的副本。这个新创建的V-DOM与旧的V-DOM进行了比较。它只更新实际DOM中的不同节点。现在新创建的V-DOM被视为即将到来的V-DOM的前一个版本。
注:1。因此,与普通js不同的是,V-DOM创建了全新版本,R-DOM进行了部分更新。 2. React不会更新状态中的每一个变化,而是批量发送对R-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是HTML DOM的抽象,它根据状态变化选择性地呈现节点的子树。它尽可能少地进行DOM操作,以使组件保持最新状态。