虚拟Dom是React的核心,一大亮点。为什么会有虚拟Dom呢,还是为了快捷高效。
Dom的作用就是对Html文档进行增删改查,我们如过要绘制一张表单,一个for循环就可以将所有的元素绘制到页面上了,但是后面其中有某个或者某几个元素更新的时候,我们又得去手动调一下for循环把整个表单重新绘制一番。牵一发而动全身,浏览器都要重新布局,重新绘制,如果Dom树有很多节点,更新又很频繁的时候,这就会非常影响性能,更严重的导致浏览器卡死。
因此,我们要想办法只更新那些有变化的Dom节点,而不是所有的,尽量减少操作真实Dom节点,实现网页加载高效。
虚拟Dom就是真实Dom结构的映射,是程序员手动实现的js对象,一种数据集合
真实Dom:
<div>
<p>
<span>
hello world
</span>
</p>
</div>
对应的虚拟Dom:
let obj = {
tag: 'div',
children: [
{
tag: 'p',
children: [
{
tag: 'span',
children: [
tag: '#text',
text: ''hello world
]
}
]
}
]
}
通过模拟新旧两颗Dom树来进行对比,找出其中发生改变的部分,然后将这部分进行渲染