visual Dom是什么🧐
虚拟DOM其实就是，像拥有类似dom的一系列属性的对象，包括：标签名，标签上的属性，事件监听，和子元素们，以及其他的相关属性；
React和Vue的本质就是虚拟DOM
// React
const reactNode = {
key: null.
props: {
children: [{ // 子元素们
type: 'span',
...
}],
className: "red", // 标签上的属性
onClick: () => {} // 事件
},
ref: null
type: "div" // 标签名 or 组件名
...
}
// Vue
const vNode = {
tag: "div", // 标签名 or 组件名
data: {
class: "red", // 标签上的属性
on: {
click: () => {} // 事件
}
},
children: [ // 子元素们
{ tag: "span", ... },
{ tag: "span", ... }
],
...
}
虚拟 DOM 的优点 ✅
- 减少DOM操作
- 减少频次
比如往页面添加1000个节点原生js一个接一个的操作，虚拟DOM可以将多次操作合并成一次操作 - 减少范围
当需要更新1000 个节点时，虚拟DOM借助DOM diff对比，省去多余的操作
- 跨平台
由于虚拟DOM本质上就是一个js对象，他可以变成DOM，还可以变成IOS应用、安卓应用，小程序等各平台的应用。
虚拟 DOM 的缺点 ➰
有一个缺点就是，需要使用额外的创建函数去创建，比如React是React.createElement，Vue而是放在了render函数中（h），但是呢，写法看起来确实不太友好
// React
createElement('div',{className:'red',onClick:()=> {}},[
createElement('span', {}, 'span1'),
createElement('span', {}, 'span2')
]
)
// Vue
h('div', {
class: 'red',
on: {
click: () => { }
},
}, [h('span',{},'span1'), h('span', {}, 'span2'])
于是，React采用了JSX语法，Vue使用Template模板，即可优雅的创建虚拟DOM了
// React
<div className="red" onClick={fn}>
<span>span1</span>
<span>span2</span>
</div>
// 后面将通过babel 转换为 createElement形式
// Vue
<div class="red" @click="fn">
<span>span1</span>
<span>span2</span>
</div>
// 后面将通过vue-loader转换为 h 形式
DOM diff 🧮
diff 就是“区别，对比”的意思，也就是：虚拟DOM的对比；
当你把虚拟DOM看做是树形，按照根左右（先序深度优先），对比两颗树。
从标签类型、对应的属性、子元素上对比，两棵树的不同，最后会返回一个patchs对象，用来存储两个节点不同的地方，最后用patchs记录的消息去局部更新Dom
大概的格式可能是这样
[{
type: 'insert',
value: ...
}, {
type: 'move',
value: ...
}, {
type: 'remove',
value: ...
}]
DOM diff 的逻辑
三类逻辑
DOM diff 的优点📗
上面提到过，可以缩减dom操作范围
DOM diff 的问题📕
如何保证DOM diff 在查找对比的时候不会出错，就需要通过指定唯一key值，提高准确率也就是对比效率
虚拟DOM的优势是——优化性能吗？
我们知道，在客户端渲染进程中，js代码调用 DOM API，会挂起JS 线程，切换到GUI 线程（Graphical User Interface）进行重排、重绘等操作；如果有频繁的DOM API调用，引擎之间的切换单位代价，将重复积累。重排和重绘，会引起更大的性能消耗。
- V-DOM不会立马重排，而是将多个重复的操作合并成一个
- V-DOM会通过对比算法，识别出需要修改的节点，省去多余操作
在全部更新的情况下，V-DOM其实没什么优势，原生操作DOM反而更快，当只有一部分数据变化时，可以以最小代价的更新DOM
也就是说，其实虚拟DOM的优点可以概括为：
- 为函数式的UI编程打开大门
- 可以渲染到DOM以外的后台（例如：ReactNative），即利于跨平台开发
网友评论