snabbdom简单解读

function updateChildren(parentElm: Node,
                        oldCh: Array<VNode>,
                        newCh: Array<VNode>,
                        insertedVnodeQueue: VNodeQueue) {
  let oldStartIdx = 0, newStartIdx = 0;
  let oldEndIdx = oldCh.length - 1;
  let oldStartVnode = oldCh[0];
  let oldEndVnode = oldCh[oldEndIdx];
  let newEndIdx = newCh.length - 1;
  let newStartVnode = newCh[0];
  let newEndVnode = newCh[newEndIdx];
  let oldKeyToIdx: any;
  let idxInOld: number;
  let elmToMove: VNode;
  let before: any;

  //通过以上的几个变量来做到逐个的比较
  //主要在于oldStart和oldEnd的几个变量
  //通过封装好的sameVnode()的函数来对比，具体的可以自行查看
  //idx控制着每一次循环对比的元素，具体的变化看每一个判断规则所做的变化

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (oldStartVnode == null) { //没有oldStartVnode的时候我们把第一个oldCh的第一个Vnode保存起来
      oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
    } else if (oldEndVnode == null) { 
      oldEndVnode = oldCh[--oldEndIdx];
    } else if (newStartVnode == null) {
      newStartVnode = newCh[++newStartIdx];
    } else if (newEndVnode == null) { //到这位置基本都和上面类似
      newEndVnode = newCh[--newEndIdx];
    } else if (sameVnode(oldStartVnode, newStartVnode)) { //以上的判断都是设置好变量，这一个判断开始就是真正开始对比的逻辑，直接判断新旧vnode的头元素是否相等
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
      oldStartVnode = oldCh[++oldStartIdx];
      newStartVnode = newCh[++newStartIdx];
    } else if (sameVnode(oldEndVnode, newEndVnode)) { //同上，对比尾vnode
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
      oldEndVnode = oldCh[--oldEndIdx];
      newEndVnode = newCh[--newEndIdx];
    } else if (sameVnode(oldStartVnode, newEndVnode)) { //对比old头vnode和new尾vnode，相等说明元素移到了末尾
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
      api.insertBefore(parentElm, oldStartVnode.elm as Node, api.nextSibling(oldEndVnode.elm as Node));
      oldStartVnode = oldCh[++oldStartIdx];
      newEndVnode = newCh[--newEndIdx];
    } else if (sameVnode(oldEndVnode, newStartVnode)) { //基本同上，对比old尾vnode和new头vnode相同的话说明元素被移到了头部
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
      api.insertBefore(parentElm, oldEndVnode.elm as Node, oldStartVnode.elm as Node);
      oldEndVnode = oldCh[--oldEndIdx];
      newStartVnode = newCh[++newStartIdx];
    } else {

      //以上  在所有对比条件都不成立之后，说明基本上的对比逻辑基本走完，剩下的基本是不等的vnode
      // 通过createKeyToOldIdx创建一个json，key和index
      if (oldKeyToIdx === undefined) {
        oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
      }
      idxInOld = oldKeyToIdx[newStartVnode.key as string];
      //扔一个newStartVnode的key到json中，如果没有说明这个newStartVnode是新的节点，直接创建并且插到最前面
      if (isUndef(idxInOld)) { // New element
        api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm as Node);
        newStartVnode = newCh[++newStartIdx];
      } else {
      //如果在json中找到了对应的节点，说明已经有了变更
        elmToMove = oldCh[idxInOld];
        //这里需要判断一下sel是否相等，不等说明节点类型已经改变创建新节点
        if (elmToMove.sel !== newStartVnode.sel) {
          api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm as Node);
        } else {
          //如果节点类型相等的话就直接扔到patchVnode 对应修改一遍属性，并且移动到最前面
          patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
          oldCh[idxInOld] = undefined as any;
          api.insertBefore(parentElm, (elmToMove.elm as Node), oldStartVnode.elm as Node);
        }
        //那最后 我们每处理完一个newVnode就将idx+1
        newStartVnode = newCh[++newStartIdx];
      }
    }
  }
  
  //如果这里StartIdx依旧小于EndIdx的话， 说明有多余的节点
  if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {        
    //这一段主要用于删除掉或者添加进去多余或者缺失的节点
    //这一段说明 old节点已经处理完了，我们需要newVnode创建并添加
    if (oldStartIdx > oldEndIdx) {
      before = newCh[newEndIdx+1] == null ? null : newCh[newEndIdx+1].elm;
      addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
    } else {
      //这一段说明是new节点处理完成，直接删除多余节点
      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
    }
  }
}