React && VUE Virtual Dom的Diff算法统一之路 snabbdom.js解读

var newVnode = render(vnode, state)
var oldVnode = patch(oldVnode, newVnode)
state.dispatch('change')
var newVnode = render(vnode, state)
var oldVnode = patch(oldVnode, newVnode)

// snabbdom在./snabbdom.js
var snabbdom = require('snabbdom')
// 初始化snabbdom,得到patch。随后,我们可以看到snabbdom设计的精妙之处
var patch = snabbdom.init([
  require('snabbdom/modules/class'),
  require('snabbdom/modules/props'),
  require('snabbdom/modules/style'),
  require('snabbdom/modules/eventlisteners')
])
// h是一个生成vnode的包装函数,factory模式？对生成vnode更精细的包装就是使用jsx
// 在工程里,我们通常使用webpack或者browserify对jsx编译
var h = require('snabbdom/h')
// 构造一个virtual dom,在实际中,我们通常希望一个无状态的vnode
// 并且我们通过state来创造vnode
// react使用具有render方法的对象来作为组件,这个组件可以接受props和state
// 在snabbdom里面,我们同样可以实现类似效果
// function component(state){return h(...)}
var vnode = 
  h(
    'div#container.two.classes', 
    {on: {click: someFn}}, 
    [ 
      h('span', {style: {fontWeight: 'bold'}}, 'This is bold'), 
      ' and this is just normal text', 
      h('a', {props: {href: '/foo'}}, 
      'I\'ll take you places!')
    ]
  )
// 得到初始的容器,注意container是一个dom element
var container = document.getElementById('container')
// 将vnode patch到container中
// patch函数会对第一个参数做处理,如果第一个参数不是vnode,那么就把它包装成vnode
// patch过后,vnode发生变化,代表了现在virtual dom的状态
patch(container, vnode)
// 创建一个新的vnode
var newVnode = 
  h(
    'div#container.two.classes', 
    {on: {click: anotherEventHandler}}, 
    [ 
      h('span', {style: {fontWeight: 'normal', fontStyle: 'italics'}},
      'This is now italics'), 
      ' and this is still just normal text', 
      h('a', {props: {href: '/bar'}}, 'I\'ll take you places!')
    ]
  )
// 将新的vnode patch到vnode上,现在newVnode代表vdom的状态
patch(vnode, newVnode)

return function(oldVnode, vnode) {
  var i, elm, parent;
  // insertedVnodeQueue存在于整个patch过程
  // 用于收集patch中新插入的vnode
  var insertedVnodeQueue = [];
  // 在进行patch之前,我们需要运行prepatch hook
  // cbs是init函数变量,即,这个return语句中函数的闭包
  // 这里,我们不理会lifecycle hook,而只关注vdom diff算法
  for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();

  // 如果oldVnode不是vnode(在第一次调用时,oldVnode是dom element)
  // 那么用emptyNodeAt函数来将其包装为vnode
  if (isUndef(oldVnode.sel)) {
    oldVnode = emptyNodeAt(oldVnode);
  }
  
  // sameVnode是上述“值不值得patch”的核心
  // sameVnode实现很简单,查看两个vnode的key与sel是否分别相同
  // ()=>{vnode1.key === vnode2.key && vnode1.sel === vnode2.
  // 比较语义不同的结构没有意义,比如diff一个'div'和'span'
  // 而应该移除div,根据span vnode插入新的span
  // diff两个key不相同的vnode同样没有意义
  // 指定key就是为了区分element
  // 对于不同key的element,不应该去根据newVnode来改变oldVnode的数据
  // 而应该移除不再oldVnode,添加newVnode
  if (sameVnode(oldVnode, vnode)) {
    // oldVnode与vnode的sel和key分别相同,那么这两个vnode值得去比较
    //patchVnode根据vnode来更新oldVnode
    patchVnode(oldVnode, vnode, insertedVnodeQueue);
  } else {
    //不值得去patch的,我们就暴力点
    // 移除oldVnode,根据newVnode创建elm,并添加至parent中
    elm = oldVnode.elm;
    parent = api.parentNode(elm);

    // createElm根据vnode创建element
    createElm(vnode, insertedVnodeQueue);

    if (parent !== null) {
      // 将新创建的element添加到parent中
      api.insertBefore(parent, vnode.elm, api.nextSibling(elm));
      // 同时移除oldVnode
      removeVnodes(parent, [oldVnode], 0, 0);
    }
  }

  // 结束以后,调用插入vnode的insert hook
  for (i = 0; i < insertedVnodeQueue.length; ++i) {
    insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
  }

  // 整个patch结束,调用cbs中的post hook
  for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
  return vnode;
};
```

    ###然后我们阅读patch的过程

```
function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
  var i, hook;
  // 如前,在patch之前,调用prepatch hook,但是这个是vnode在data里定义的prepatch hook,而不是全局定义的prepatch hook
  if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
    i(oldVnode, vnode);
  }

  var elm = vnode.elm = oldVnode.elm, oldCh = oldVnode.children, ch = vnode.children;

  // 如果oldVnode和vnode引用相同,则没必要比较。在良好设计的vdom里,大部分时间我们都在执行这个返回语句。
  if (oldVnode === vnode) return;
  // 如果两次引用不同,那说明新的vnode创建了
  // 与之前一样,我们先看这两个vnode值不值得去patch
  if (!sameVnode(oldVnode, vnode)) {
    // 这四条语句是否与init返回函数里那四条相同？
    var parentElm = api.parentNode(oldVnode.elm);
    elm = createElm(vnode, insertedVnodeQueue);
    api.insertBefore(parentElm, elm, oldVnode.elm);
    removeVnodes(parentElm, [oldVnode], 0, 0);
    return;
  }
  // 这两个vnode值得去patch
  // 我们先patch vnode,patch的方法就是先调用全局的update hook
  // 然后调用vnode.data定义的update hook
  if (isDef(vnode.data)) {
    for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
    i = vnode.data.hook;
    if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
  }
  // patch两个vnode的text和children
  // 查看vnode.text定义
  // vdom中规定,具有text属性的vnode不应该具备children
  // 对于<p>foo:<b>123</b></p>的良好写法是
  // h('p', [ 'foo:', h('b', '123')]), 而非
  // h('p', 'foo:', [h('b', '123')])
  if (isUndef(vnode.text)) {
    // vnode不是text node,我们再查看他们是否有children
    if (isDef(oldCh) && isDef(ch)) {
      // 两个vnode都有children,那么就调用updateChildren
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
    } else if (isDef(ch)) {
      // 只有新的vnode有children,那么添加vnode的children
      if (isDef(oldVnode.text)) api.setTextContent(elm, '');
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
    } else if (isDef(oldCh)) {
      // 只有旧vnode有children,那么移除oldCh
      removeVnodes(elm, oldCh, 0, oldCh.length - 1);
    } else if (isDef(oldVnode.text)) {
      // 两者都没有children,并且oldVnode.text不为空,vnode.text未定义,则清空elm.textContent
      api.setTextContent(elm, '');
    }
  } else if (oldVnode.text !== vnode.text) {
    // vnode是一个text node,我们改变对应的elm.textContent
    // 在这里我们使用api.setText api
    api.setTextContent(elm, vnode.text);
  }
  if (isDef(hook) && isDef(i = hook.postpatch)) {
    i(oldVnode, vnode);
  }
}

for (i = 0; i < hooks.length; ++i) {
  cbs[hooks[i]] = [];
  for (j = 0; j < modules.length; ++j) {
    if (modules[j][hooks[i]] !== undefined)
     cbs[hooks[i]].push(modules[j][hooks[i]]);
  }
}