简单Diff算法

简单Diff算法

渲染器的核心

Diff算法

解决的问题

比较新旧虚拟节点的子节点，实现最小化更新。

虚拟节点key属性的作用

就像虚拟节点的“身份证号”，在更新时，渲染器会通过key属性找到可复用的节点，然后尽可能地通过DOM移动操作来完成更新，避免过多地对 DOM 元素进行销毁和重建。key和type的属性值均都相同，则两个节点就是相同的，即可实现进行DOM的复用。

简单Diff算法地核心逻辑（如何寻找需要移动的节点）

拿新一组子节点中的节点去旧的一组子节点中去寻找可复用的节点。如果找到了，则记录该节点的位置索引。我们把这个索引称为最大索引。在整个更新过程中，如果一个节点的索引小于最大索引，则说明该节点需要移动。

节点的移动

使用的是insert方法，找到锚点元素进行插入操作，其中insert方法对于浏览器来说依赖于原生的insertBefore函数。

源码展示

function patchChildren(n1, n2, container) {
  if (typeof n2.children === 'string') {
    // 省略部分代码
  } else if (Array.isArray(n2.children)) {
    const oldChildren = n1.children;
    const newChildren = n2.children
    // 用来存储寻找过程中遇到的最大索引值
    let lastIndex = 0;
    for (let i = 0; i < newChildren.length; i++) {
      const newVNode = newChildren[i];
      for (let j = 0; j < oldChildren.length; j++) {
        const oldVNode = oldChildren[j];
        if (newVNode.key === oldVNode.key) {
          // 进行打补丁
          patch(oldVNode, newVNode, container);
          if (j < lastIndex) {
            // 如果当前找到的节点在旧节点中的索引值小于最大索引值lastIndex，
            // 说明该节点对应的真实的DOM节点需要进行移
            // 先获取 newVNode 的前一个vnode，即 preVNode
            const preVNode = newChildren[i - 1]
            // 如果 prevVNode 不存在，则说明当前的 newVNode 是第一个节点，它不需要移动
            if (prevVNode) {
              // 由于我们需要将 newVNode 对应的真实DOM移动到 prevVNode 所对应的真实DOM后面，
              // 所以我们需要获取到 prevVNode 所对应的真实DOM的下一个兄弟节点，以此作为锚点
              
              const anchor = prevVNode.el.nextSibling();
              // 调用insert方法将 newVNode 对应的真实DOM插入到锚点元素的前面
              // 也就是 prevVNode 对应的真实DOM的后
              insert(newVNode.el, prevVNode.el, anchor);
            }
          } else {
            // 如果当前找到的节点在旧节点中的索引值大于或等于最大索引值lastIndex，
            // 则更新最大索引lastIndex的值
            lastIndex = j;
          }
          break;
        }
      }
    }
  }
}

上面代码中，如果j < lastIndex成立，则说明当前newVNode所对应的真实DOM节点需要移动。我们需要先获取当前 newVNode 节点的前一个虚拟节点，即newChildren[i - 1]，然后使用insert函数完成节点的移动，其中insert 函数依赖浏览器原生的insertBefore函数。如下：

const renderer = createRenderer({
  // 省略部分代码
  insert(el, parent, anchor = null) {
    // insertBefore 需要锚点元素anchor
    parent.insertBefore(el, anchor);
  }
  // 省略部分代码
});

添加新元素

在新一组的子节点中对应的key没有在旧一组子节点中存在的节点，即为新节点。

如上图所示，p-4节点是一个需要新增的节点。在遍历的过程中能够发现p-4节点的key值在旧子节点中没有对应找到（视为新增节点），需要将p-4节点对应的真实DOM挂载在p-1节点对应的真实DOM节点的后面。

源码展示

function patchChildren(n1, n2, container) {
  if (typeof n2.children === 'string') {
    // 省略部分代码
  } else if (Array.isArray(n2.children)) {
    const oldChildren = n1.children;
    const newChildren = n2.children
    // 用来存储寻找过程中遇到的最大索引值
    let lastIndex = 0;
    for (let i = 0; i < newChildren.length; i++) {
      const newVNode = newChildren[i]
      // 在第一层循环中定义变量find，代表是否在旧的一组子节点中找到可以复用的节点
      // 初始值为false，代表没有找到
      let find = false;
      
      for (let j = 0; j < oldChildren.length; j++) {
        const oldVNode = oldChildren[j];
        if (newVNode.key === oldVNode.key) {
          
          // 找到可复用的节点，将find置为true
          find = true;
          
          // 进行打补丁
          patch(oldVNode, newVNode, container);
          if (j < lastIndex) {
            // 如果当前找到的节点在旧节点中的索引值小于最大索引值lastIndex，
            // 说明该节点对应的真实的DOM节点需要进行移
            // 先获取 newVNode 的前一个vnode，即 preVNode
            const preVNode = newChildren[i - 1]
            // 如果 prevVNode 不存在，则说明当前的 newVNode 是第一个节点，它不需要移动
            if (prevVNode) {
              // 由于我们需要将 newVNode 对应的真实DOM移动到 prevVNode 所对应的真实DOM后面，
              // 所以我们需要获取到 prevVNode 所对应的真实DOM的下一个兄弟节点，以此作为锚点
              
              const anchor = prevVNode.el.nextSibling();
              // 调用insert方法将 newVNode 对应的真实DOM插入到锚点元素的前面
              // 也就是 prevVNode 对应的真实DOM的后
              insert(newVNode.el, prevVNode.el, anchor);
            }
          } else {
            // 如果当前找到的节点在旧节点中的索引值大于或等于最大索引值lastIndex，
            // 则更新最大索引lastIndex的值
            lastIndex = j;
          }
          break;
        }
      }
      
      // 若代码运行至此，find仍为false
      // 说明当前 newVNode 没有在旧一组子节点找到可复用的节点
      // 即 newVNode 为新增节点，需要挂载
      if (!find) {
        // 为了将新增节点挂载到正确的位置，我们需要找到锚点元素
        // 获取 newVNode 的前一个 vnode 节点
        const prevVNode = newChildren[i - 1];
        let anchor = null;
        if (prevVNode) {
          // 如果有前一个 vnode 节点，则使用它的下一个兄弟节点作为锚点元素
          anchor = prevVNode.el.nextSibling;
        } else {
          // 如果没有前一个 vnode 节点，则说明即将挂载的节点是第一个子节点
          // 这时我们使用容器元素的 firstChild 作为锚点
          anchor = container.firstChild;
        }
        // 挂载 newVNode
         patch(null, newVNode, container, anchor);
      }
    }
  }
}

上面的代码，首先我们在外层循环中定义了find变量，它表示新一组子节点是否在旧一组子节点中找到可复用的节点。变量find初始值为false，一旦找到可复用的子节点就将find置为true。如果内层循环结束后，find值仍然为false，说明当前 newVNode 是一个新增节点，需要挂载。为了找到此节点被挂载的位置，我们要获取到锚点元素：找到 newVNode 前一个虚拟节点，即 prevNode。如果存在 prevNode 存在，那么我们就取 prevNode 节点的下一个兄弟节点对应的真实DOM元素作为锚点，进行挂载；如果不存在，则说明当前需要挂载的 newVNode 节点是第一个子节点，此时应该使用容器元素的container.firstChild作为锚点。最后将锚点 anchor 作为patch函数的第四个参数，调用 patch 函数进行挂载。

patch函数如下：

// patch 函数需要接收四个参数
// n1: 旧vnode
// n2: 新vnode
// container: 容器
// anchor: 锚点元素
function patch(n1, n2, container, anchor) {
  // 省略部分代码
  if (typeof type === 'string') {
    if (!n1) {
      // 挂载时将锚点元素作为第三个参数传递给 mountElement 函数
      mountElement(n2, container, anchor);
    } else {
      patchElement(n1, n2);
    }
  } else if (typeof type === Text) {
    // 省略部分代码
  } else if (typeof type === Fragment) {
    // 省略部分代码
  }
}

// mountElement 函数
function mountElement(vnode, container, anchor) {
  // 省略部分代码
  // 在插入节点时，将锚点元素透传给 insert 函数
  insert(el, container, anchor);
}

移除不存在的元素

如上图所示，节点p-2是需要被删除的元素。

源码展示

    function patchChildren(n1, n2, container) {
      if (typeof n2.children === 'string') {
        // 省略部分代码
      } else if (Array.isArray(n2.children)) {
        const oldChildren = n1.children;
        const newChildren = n2.children;

        // 用来存储寻找过程中遇到的最大索引值
        let lastIndex = 0;
        for (let i = 0; i < newChildren.length; i++) {
          // 省略部分代码
        }

        // 上一步的更新操作完成后，遍历旧的一组子节点
        for (let i = 0; i < oldChildren.length; i++) {
          const oldVNode = oldChildren[i];
          // 拿旧子节点 oldVNode 去新的一组子节点中寻找具有相同 key 值的节点
          const has = newChildren.find(ele => ele.key === oldVNode.key);
          if (!has) {
            // 如果没有找到具有相同 key 的节点，则说明需要删除该节点
            // 调用 unmount 函数将其卸载
            unmount(oldVNode);
          } else {
            // 省略部分代码
          }
        }
      }
    }

更新结束后，增加删除额外节点的逻辑来删除遗留节点。当基本的更新结束后，需要遍历旧的一组子节点，然后去新的一组子节点中去寻找具有相同 key 值的节点。如果找不到，则说明需要删除该节点（调用unmount函数将其卸载）。