最近,我研究了Facebook的React框架。它使用了一个叫做“虚拟DOM”的概念,我并不真正理解这个概念。
什么是虚拟DOM?它的优点是什么?
最近,我研究了Facebook的React框架。它使用了一个叫做“虚拟DOM”的概念,我并不真正理解这个概念。
什么是虚拟DOM?它的优点是什么?
当前回答
虚拟Dom是创建Dom的一个副本。虚拟dom与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。
虚拟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创建了一个自定义对象树,表示DOM的一部分。例如,它不是创建一个包含UL元素的实际DIV元素,而是创建一个React。包含React的div对象。ul对象。它可以非常快速地操作这些对象,而无需实际接触真正的DOM或通过DOM API。然后,当它呈现一个组件时,它使用这个虚拟DOM来确定它需要对真实DOM做什么,以使两棵树匹配。
您可以将虚拟DOM看作是一个蓝图。它包含了构建DOM所需的所有细节,但由于它不需要真正DOM中所有的重量级部分,因此可以更容易地创建和更改它。
这是一个简洁的概念:不直接操作DOM(容易出错并且依赖于可变状态),而是输出一个名为Virtual DOM的值。然后,虚拟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 :)