diff 算法：函数 patch（一）

2024-01-21 14:23:36

新旧节点的对比是 diff 算法的核心，将新旧节点抽象成虚拟节点后，需要将新旧虚拟节点进行对比，对比出新增、删除、修改。
本篇文章主要讲如何实现 patch 函数中的其中一部分，因为 patch 内容较多，可以由浅入深的实现。

1. patch 函数的基本实现

function patch(root, vnode) {
  const isRealElement = root.nodeType !== 3; // 判断根节点是否是真是 DOM 节点
  if (isRealElement) {
    // 如果是真是的 DOM 节点
    const elm = root;
    const parentElm = elm.parentNode; // 父元素
    let oldCh = elm.children; // 老的子节点
    let newCh = vnode.children; // 新的子节点
    diff(oldCh, newCh); // 对比新旧子节点
    elm.appendChild(newCh);
  } else {
    // 如果是文本节点
    root.textContent = vnode.children;
  }
}

2. 对比新旧子节点

function diff(oldCh, newCh) {
  let oldStartIdx = 0; // 旧节点的开始索引
  let oldEndIdx = oldCh.length - 1; // 旧节点的结束索引
  let newStartIdx = 0; // 新节点的开始索引
  let newEndIdx = newCh.length - 1; // 新节点的结束索引
  let oldKeyToIdx; // 旧节点的 key 到索引的映射
  let idxInOld; // 新节点在旧节点中的索引
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 比较 oldStartIdx 和 newStartIdx 的节点
    if (!oldKeyToIdx) {
      oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
    }
    idxInOld = oldKeyToIdx[newCh[newStartIdx].key];
    // 如果节点相同，则比较子节点
    if (sameVnode(oldCh[oldStartIdx], newCh[newStartIdx])) {
      patchVnode(oldCh[oldStartIdx], newCh[newStartIdx]);
      oldStartIdx++;
      newStartIdx++;
    } else if (idxInOld) {
      // 如果节点不同，但旧节点中存在相同 key 的节点，则移动旧节点到正确的位置
      const elmToMove = oldCh[idxInOld];
      oldCh[idxInOld] = null;
      const before = newCh[newStartIdx + 1];
      elmToMove.parentNode.insertBefore(elmToMove, before);
      newStartIdx++;
    } else {
      // 如果节点不同，且旧节点中不存在相同 key 的节点，则创建一个新的节点
      const elm = createElm(newCh[newStartIdx]);
      oldCh.insertBefore(elm, oldCh[oldStartIdx]);
      newStartIdx++;
    }
  }
  // 处理剩余的旧节点
  while (oldStartIdx <= oldEndIdx) {
    oldCh[oldStartIdx].parentNode.removeChild(oldCh[oldStartIdx]);
    oldStartIdx++;
  }
  // 处理剩余的新节点
  while (newStartIdx <= newEndIdx) {
    const elm = createElm(newCh[newStartIdx]);
    oldCh.appendChild(elm);
    newStartIdx++;
  }
}