虚拟 DOM 和 DOM diff

虚拟 DOM 是什么

一个能代表 DOM 树的对象，通常含有标签名、标签上的属性、事件监听和子元素们，以及其他属性

虚拟 DOM 的优点

• 减少 DOM 操作

1. 虚拟 DOM 可以将多次操作合并为一次操作，比如你添加 1000 个节点，却是一个接一个操作的（减少频率）
2. 虚拟 DOM 借助 DOM diff 可以把多余的操作省掉，比如你添加 1000 个节点，其实只有 10 个是新增的（减少范围）

• 跨平台 虚拟 DOM 不仅可以变成 DOM，还可以变成小程序、iOS 应用、安卓应用，因为虚拟 DOM 本质上只是一个 JS 对象

虚拟 DOM 长什么样子

• React

const vNode = {
  key: null,
  props: {
    children: [  // 子元素们
       { type: 'span', ... }, 
       { 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

• React.createElement

createElement('div',{className:'red',onClick:()=> {}},[    createElement('span', {}, 'span1'),    createElement('span', {}, 'span2')  ]
)

• Vue（只能在 render 函数里得到 h）

h('div', {
  class: 'red',
  on: {
    click: () => { }
  },
}, [h('span',{},'span1'), h('span', {}, 'span2'])

用 JSX 简化创建虚拟 DOM

• React JSX

<div className="red" onClick="{()=> {}}">
    <span>span1</span>
    <span>span2</span>
</div>

• Vue Template

  class: 'red',
  on: {
    click: () => { }
  },
}, [h('span',{},'span1'), h('span', {}, 'span2'])

现在创建虚拟 DOM 的方法

• React

<div className="red" onClick={fn}>
    <span>span1</span>
    <span>span2</span>
</div>

通过 babel 转为 createElement 形式

• Vue Template

<div class="red" @click="fn">
  <span>span1</span>
  <span>span2</span>
</div>

通过 vue-loader 转为 h 形式

虚拟 DOM 的缺点

需要额外的创建函数，如 createElement 或 h，但可以通过 JSX 来简化成 XML 写法

DOM diff 是什么

• 就是一个函数，我们称之为 patch
• patches = patch(oldVNode, newVNode)
• patches 就是要运行的 DOM 操作，可能长这样：

[
  {type: 'INSERT', vNode: ... },
  {type: 'TEXT',  vNode: ... },
  {type: 'PROPS', propsPatch: [...]}
]

• Tree diff

1. 将新旧两棵树逐层对比，找出哪些节点需要更新
2. 如果节点是组件就看 Component diff
3. 如果节点是标签就看 Element diff

• Component diff

1. 如果节点是组件，就先看组件类型
2. 类型不同直接替换（删除旧的）
3. 类型相同则只更新属性
4. 然后深入组件做 Tree diff（递归）

• Element diff

1. 如果节点是原生标签，则看标签名
2. 标签名不同直接替换，相同则只更新属性
3. 然后进入标签后代做 Tree diff（递归）

DOM diff 的优点

可以做到只把变化的部分重新渲染,提高渲染效率的过程

DOM diff 的问题（key）

• 同级节点对比存在 bug
• 解决方法：用唯一Key值进行区分