简单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，即 preVNodeconst 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 需要锚点元素anchorparent.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置为truefind = true;// 进行打补丁patch(oldVNode, newVNode, container);if (j < lastIndex) {// 如果当前找到的节点在旧节点中的索引值小于最大索引值lastIndex，// 说明该节点对应的真实的DOM节点需要进行移// 先获取 newVNode 的前一个vnode，即 preVNodeconst 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;}// 挂载 newVNodepatch(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 {// 省略部分代码}}}}