简单Diff算法

简单Diff算法

渲染器的核心

Diff算法

解决的问题

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

虚拟节点key属性的作用

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

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

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

节点的移动

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

简单Diff算法_第1张图片

源码展示
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没有在旧一组子节点中存在的节点,即为新节点。

简单Diff算法_第2张图片

如上图所示,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);
}

移除不存在的元素

简单Diff算法_第3张图片

如上图所示,节点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函数将其卸载)。

你可能感兴趣的:(javascript,开发语言,ecmascript)