React虚拟DOM的理解
(1)用JavaScript对象结构表示DOM树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
(2)当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
(3)把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了
虚拟DOM本质上就是在JS和DOM之间做了一个缓存。可以类比CPU和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然DOM这么慢,我们就在JS和DOM之间加个缓存。CPU(JS)只操作内存(虚拟DOM),最后的时候再把变更写入硬盘(DOM)。
虚拟DOM是用JS的对象结构模拟出HTML中DOM的结构,批量的增删改查,由于直接操作的是JS对象,所以速度要比操作真实DOM要快,最后更新到真正的DOM中
虚拟DOM构建的对象,除了DOM相关属性,还包括了React自身需要的属性,比如ref
,key
等,大概如下结构:
{
type: 'div',
props: {
className: 'xxx',
children: [{
type: 'span',
props: {
children: ['CLICK ME']
},
ref: key:
}, {
type: Form,
props: {
children: []
},
ref: key:
}] | Element
}
ref: 'xxx',