什么是虚拟DOM?

最近,我看了Facebook的React框架。 它使用了一个名为“虚拟DOM”的概念,我并不是很懂。

什么是虚拟DOM? 有什么优势?

React创build一个代表DOM一​​部分的自定义对象树。 例如,不是创build包含UL元素的实际DIV元素,而是创build包含React.ul对象的React.div对象。 它可以非常快速地操作这些对象,而无需真正触及真正的DOM或通过DOM API。 然后,当它渲染一个组件时,它使用这个虚拟DOM来弄清楚它需要怎样处理真正的DOM来使两棵树匹配。

你可以把虚拟DOM想象成蓝图。 它包含了构buildDOM所需的所有细节,但是因为它不需要所有进入真实DOM的重量级部分,所以它可以更容易地创build和更改。

举一个例子 – 虽然是一个非常天真的例子:如果你的房子里有什么东西搞乱了,你需要清理它,那么你的第一步是什么? 你会打扫你的房间,这是搞砸了,还是整个房子? 答案是肯定的,你将只清洁需要清洁的房间。 这就是虚拟DOM所做的。

普通的JS遍历或渲染整个DOM,而不是仅渲染需要修改的部分。

所以每当你有任何改变时,就像在你想添加另一个<div>到你的DOM那样,虚拟DOM将被创build,实际上并没有在实际的DOM中做任何改变。 现在使用这个虚拟DOM,你将检查这个和你当前的DOM之间的区别。 只有不同的部分(在这种情况下,新的<div> )将被添加,而不是重新渲染整个DOM。

什么是虚拟DOM?

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

在这里输入图像说明

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

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

那么为什么要通过这一切来产生一个虚拟的DOM? 简单的答案 – 这可以让反应变得快速。 它通过虚拟DOM差异来实现。 比较两个虚拟树 – 新旧虚拟树,并只对真正的DOM做必要的修改。

来源从介绍到反应#2

虚拟DOM是HTML DOM的抽象,它根据状态变化有select地呈现节点的子树。 它尽可能less的DOM操作,以保持你的组件最新。