,
在react当中虚拟DOM可以说优化了很多我们对真实DOM的操作,优化了性能。
什么是虚拟DOM?
vdom可以看作是一个对象,使用javascript模拟了DOM结构的树形结构,这个树结构包含整个DOM结构的信息;
html:
`
<div class=”demo”><span>123</span></div>
`
vdom(是一个json 对象,暂时用数组表示):
`
[‘div’, { class: ‘demo’ }, [‘span’, {}, ‘123’]]
`
如何实现虚拟dom?
思考一:
1. 生成state 数据;
2. 解析jsx模版;
3. 数据 + 模版 生成真实DOM显示出来;
4. state 发生变化;
5. 数据 + 模版 生成真实DOM替换到原有DOM;
缺点:
生成了2次DOM模版,数据发生变化将原有DOM整个替换掉;
思考二:
1. 生成state数据;
2. 解析jsx模版;
3. 数据 + 模版生成真实DOM显示出来;
4. state 发生变化;
5. 数据 + 模版 生成真实DOM 并不替换原有DOM;?。,m n
6. 在内存中将新DOM(DocumentFragment)与原始DOM,做对比,找差异;
7. 找出对应的发生了变化;
8. 用新DOM对应的位置替换掉原始DOM发生变化的地方;
缺点:
虽然节约了整个替换的性能,但是也多了很多步骤,并且损耗了内存中做DOM比对的性能;在性能提升
上并没有得到多大的提升;
思考三:
1. 生成state数据;
2. 解析jsx模版;
3. 数据 + 模版生成真实DOM显示出来;
4. 数据 + 模版生成原始虚拟DOM(Json),来表述真实DOM;
5. state 发生变化;
6. 数据 + 模版生成新的虚拟DOM,
7. 对比原始虚拟DOM与新的虚拟DOM的差异;
8. 操作真实DOM,将差异部分进行修改;
为什么react当中的虚拟DOM可以提高性能呢?
主要是因为减少了对真实DOM的操作,以及真实DOM的对比,取而代之的是用js对象的对比,这样实现
了性能的极大的飞跃。