虚拟 DOM 之 Diff 算法

上一节讲了虚拟 DOM，但是虚拟 DOM 是如何更新的？新旧节点的 path 又是如何进行的？这都需要一个 Diff 来完成。

给定任意两颗数，采用先序深度优先遍历的算法，找到最少的转换步骤。

DOM-diff 比较两个虚拟 DOM 的区别，也就是在比较两个对象的区别。

作用：根据两个虚拟 DOM 对象创建出补丁，然后打补丁、更新 DOM。

Diff 逻辑

diff 的作用也了解了，他就是通过对比新老 Node，从而得到最后的 Patch

接受两个参数 newNode 和 oldNode

// diff.js
function diff(odlTree, newTree) {
  // 声明变量 patches 用来存放补丁的对象
  let patches = {};
  // 第一次比较的 应该是树的第0个索引
  let index = 0;
  // 递归树
  walk(odlTree, newTree, index, patches);
  return patches;
}

function walk(oldNode, newNode, index, patches) {
  // 每一个元素都有一个补丁
  let current = [];

  if (!newNode) {
    // ----规则 1 新节点不存在----
    current.push({
      type: "REMOVE",
      index,
    });
  } else if (isString(oldNode) && isString(newNode)) {
    // 是文本节点
    if (oldNode !== newNode) {
      // 文本发生了变化
      current.push({
        type: "TEXT",
        text: newNode,
      });
    }
  } else if (oldNode.type === newNode.type) {
    // 比较属性变化
    let attr = diffAttr(oldNode.props, newNode.props);
    if (Object.keys[attr].length > 0) {
      // 有更新的属性
      current.push({
        type: "ATTR",
        attr,
      });
    }
    // 如果有子节点，递归子节点
    diffChildren(oldNode.children, newNode.children, patches);
  } else {
    // 都没有 说明节点被替换了
    current.push({
      type: "REPLACE",
      newNode,
    });
  }
  // 当前节点有补丁
  if (current.length) {
    patches[index] = current;
  }
}
// 比较是否是 文本 类型
function isString(node) {
  return typeof node === "string";
}
// 比较属性的差异
function diffAttr(oldProps, newProps) {
  let patch = {};
  // 1. 改变的属性
  // 判断新老属性的变更，把最后的变更放在patch中
  for (let key in oldProps) {
    if (oldProps[key] !== newProps[key]) {
      // 以新属性为准，因为新属性是最后的变更
      patch[key] = newProps[key];
    }
  }
  // 2. 新增的属性
  // 判断 假如新的属性，在老属性中没有，也添加patch
  for (let key in newProps) {
    if (!oldProps[key]) {
      patch[key] = newProps[key];
    }
  }
  return patch;
}
// 基于一个num序号来实现的
let num = 0;
// 递归子节点
function diffChildren(oldChildren, newChildren, patches) {
  // 比较老的第一个和新的第一个
  oldChildren.forEach((e, i) => {
    walk(e, newChildren[i], ++num, patches);
  });
}

// https://www.cnblogs.com/wind-lanyan/p/9061684.html

比较规则

1. 新 Node 节点不存在时：REMOVE
2. 文本的变化：TEXT
3. 节点类型相同，属性不同时：ATTR
4. 接点类型不同，使用替换：REPLACE

Patch 逻辑

其实就是元素去打补丁，通过 type 然后执行不同的操作如新增、删除、移动、修改等...

// patch

let allPatches;
let index2 = 0;

function patch(node, patches) {
  allPatches = patches;
  // 打补丁
  walk2(node);
}

function walk2(node) {
  let current = allPatches[index2++];
  let childNodes = node.childNodes;
  // 先序遍历 继续遍历递归子节点
  childNodes.forEach((child) => walk2(child));
  if (current) {
    // debugger
    doPatch(node, current);
  }
}

//打补丁
function doPatch(node, patches) {
  // 遍历所有打过的补丁
  patches.forEach((patch) => {
    switch (patch.type) {
      case "ATTR":
        for (let key in patch.attr) {
          let value = patch.attr[key];
          if (value) {
            setAttr(node, key, value);
          } else {
            node.removeAttribute(key);
          }
        }
        break;
      case "TEXT":
        node.textContent = patch.text;
        break;
      case "REPLACE":
        let newNode = patch.newNode;
        newNode =
          newNode instanceof Element
            ? render(newNode)
            : document.createTextNode(newNode);
        node.parentNode.replaceChild(newNode, node);
        break;
      case "REMOVE":
        node.parentNode.removeChild(node);
        break;
      default:
        break;
    }
  });
}

为了便于理解，只是罗列出了一小部分，Vue 的 patch 更复杂，可以参考：vue 技术揭秘open in new window和vuejs/src/core/vdom/patchopen in new window

总结

代码地址：virtual-dom-studyopen in new window

捋一下主要方法的作用：

• Element：创建虚拟 DOM 元素的类
  • createElement：创建虚拟 DOM 并返回
• render：将虚拟 DOM 渲染成真实的 DOM
• diff：对比新老虚拟 DOM，然后返回变更
• patch：将 diff 的变更更新到真实的 DOM 上

梳理一下整个 DOM-diff 的过程：

• 用 JS 对象模拟 DOM（虚拟 DOM）
• 把虚拟 DOM 转化成真实的 DOM 并插入到页面中
• 如果有事件改变了虚拟 DOM，就比较两个虚拟 DOM 树的差异，得到差异对象（diff)
• 最后把差异对象（变化）更新到真实的 DOM 树上（patch）

这并不是 Vue，所使用的 diff 方法，只是一个简单的 diff 过程，Vue 的 diff 可以参考：精读《DOM diff 原理详解》open in new window和精读《DOM diff 最长上升子序列》open in new window

参考

• 学习虚拟 DOMopen in new window