什么是虚构DOM？为什么要应用虚构DOM？

虚构DOM（virtual DOM）就是应用JavaScript对象来形容DOM。
原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我须要更新10个DOM节点，浏览器收到第一个更新申请后并不知道还有9次更新操作，因而会马上执行流程，最终执行10次。
应用虚构DOM能够先反映在JS对象(虚构DOM)上，操作内存中的JS对象效率更高，等更新实现后，再将最终的JS对象映射成实在的DOM，交由浏览器去绘制。

snabbdom的外围

  1. 首先init()函数用来加载模块，并且返回patch函数
  2. 应用h()函数创立虚构DOM形容的实在DOM
  3. 应用patch函数比拟新旧两个vnode
  4. 把变动的DOM节点更新到实在DOM树
import { init } from 'snabbdom/build/package/init'import { h } from "snabbdom/build/package/h"const patch = init([])// 第一个参数：标签+选择器// 第二个参数：如果是字符串就是标签中的文本内容let vnode = h('div#container.cls', 'hello world xuquantong')let app = document.querySelector('#app')// patch函数第// 第一个参数：旧的vnode,能够是DOM元素,dom元素会转换成vnode// 第二个参数：新的vnode// 返回新的vnode,也就是第二个参数let oldVnode = patch(app, vnode)vnode = h('div#container.xxx', 'hello zhangyanzhen')patch(oldVnode, vnode)