虚拟 DOM 和 DOM diff

2021-04-02 本文已影响0人 Adder

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），即利于跨平台开发