React和Vue3 的 Diff 算法有什么区别

React 和 Vue 3 的 Diff 算法都有相似的目标，即在组件状态或属性变化时高效地更新 DOM，但它们在实现细节上有所不同。以下是 React 和 Vue 3 的 Diff 算法的主要区别：

React 的 Diff 算法

1. 同层比较

React 使用的是同层比较策略，即只比较同一层级的节点，而不跨层级比较。这样可以显著减少比较的复杂度。

2. 基于 key 的 Diff

React 鼓励使用 key 属性来标识列表中的每个元素。key 是 Diff 算法的核心，用来确定节点的身份。如果节点的 key 发生变化，React 会认为这是一个新的节点，从而重新创建。

3. 递归比对子节点

React 对每个节点进行深度优先遍历，递归比较每个节点及其子节点。如果节点类型相同，则继续比较属性和子节点；如果不同，则直接替换。

4. 批量更新

React 使用批量更新（Batch Updates）策略，即在一个事件循环内收集所有的状态更新，并在下一次渲染周期统一处理。这种方式可以减少浏览器的重排（reflow）和重绘（repaint），从而提升性能。

Vue 3 的 Diff 算法

1. 同层比较

和 React 一样，Vue 3 也使用同层比较策略，只比较同一层级的节点。

2. 基于 key 的 Diff

Vue 3 也使用 key 属性来标识列表中的每个元素。如果没有 key，Vue 会使用节点的顺序进行比较，这可能导致性能下降。

3. 预比较优化

Vue 3 在 Diff 算法中引入了一些预比较优化，例如最长递增子序列（LIS）优化，用来减少节点移动次数。

4. 就地更新

Vue 采用就地更新（In-place Updates）策略，即在每次状态变化时，立即进行对应的 DOM 更新。Vue 通过一个响应式系统来追踪状态的变化，并在状态变化时自动更新对应的 DOM。

具体比较

React 的 Diff 算法示例

function diff(oldTree, newTree) {
  const patches = {};
  walk(oldTree, newTree, 0, patches);
  return patches;
}

function walk(oldNode, newNode, index, patches) {
  const currentPatch = [];

  if (!newNode) {
    currentPatch.push({ type: 'REMOVE', index });
  } else if (typeof oldNode === 'string' && typeof newNode === 'string') {
    if (oldNode !== newNode) {
      currentPatch.push({ type: 'TEXT', text: newNode });
    }
  } else if (oldNode.type === newNode.type) {
    const attrPatch = diffAttributes(oldNode.props, newNode.props);
    if (Object.keys(attrPatch).length > 0) {
      currentPatch.push({ type: 'ATTR', attrs: attrPatch });
    }
    diffChildren(oldNode.children, newNode.children, patches);
  } else {
    currentPatch.push({ type: 'REPLACE', node: newNode });
  }

  if (currentPatch.length > 0) {
    patches[index] = currentPatch;
  }
}

function diffAttributes(oldAttrs, newAttrs) {
  const patch = {};
  for (let key in oldAttrs) {
    if (oldAttrs[key] !== newAttrs[key]) {
      patch[key] = newAttrs[key];
    }
  }
  for (let key in newAttrs) {
    if (!oldAttrs.hasOwnProperty(key)) {
      patch[key] = newAttrs[key];
    }
  }
  return patch;
}

function diffChildren(oldChildren, newChildren, patches) {
  const max = Math.max(oldChildren.length, newChildren.length);
  for (let i = 0; i < max; i++) {
    walk(oldChildren[i], newChildren[i], ++index, patches);
  }
}

Vue 3 的 Diff 算法示例

function patch(oldVNode, newVNode, container) {
  if (!oldVNode) {
    // 挂载
    mount(newVNode, container);
  } else {
    // 更新
    patchNode(oldVNode, newVNode);
  }
}

function patchNode(oldVNode, newVNode) {
  if (oldVNode.type !== newVNode.type) {
    // 替换不同类型的节点
    const newEl = createElement(newVNode);
    oldVNode.el.parentNode.replaceChild(newEl, oldVNode.el);
  } else {
    const el = (newVNode.el = oldVNode.el);
    // 更新属性
    patchProps(el, oldVNode.props, newVNode.props);
    // 更新子节点
    patchChildren(oldVNode, newVNode, el);
  }
}

function patchChildren(oldVNode, newVNode, container) {
  const oldChildren = oldVNode.children;
  const newChildren = newVNode.children;

  if (typeof newChildren === 'string') {
    container.textContent = newChildren;
  } else {
    // 比较新旧子节点
    const oldLen = oldChildren.length;
    const newLen = newChildren.length;
    const commonLen = Math.min(oldLen, newLen);

    for (let i = 0; i < commonLen; i++) {
      patch(oldChildren[i], newChildren[i], container);
    }

    if (newLen > oldLen) {
      // 挂载新节点
      mountChildren(newChildren.slice(oldLen), container);
    } else if (newLen < oldLen) {
      // 移除多余节点
      unmountChildren(oldChildren.slice(newLen));
    }
  }
}

function patchProps(el, oldProps, newProps) {
  for (let key in newProps) {
    el.setAttribute(key, newProps[key]);
  }
  for (let key in oldProps) {
    if (!newProps.hasOwnProperty(key)) {
      el.removeAttribute(key);
    }
  }
}

function mountChildren(children, container) {
  children.forEach(child => {
    mount(child, container);
  });
}

function unmountChildren(children) {
  children.forEach(child => {
    child.el.parentNode.removeChild(child.el);
  });
}

主要区别

1. 同层比较：React 和 Vue 3 都使用同层比较策略，只比较同一层级的节点。
2. 基于 key 的 Diff：React 和 Vue 3 都使用 key 属性来标识列表中的每个元素，确保高效的 Diff 过程。
3. 预比较优化：Vue 3 在 Diff 算法中引入了预比较优化，例如最长递增子序列（LIS）优化，用来减少节点移动次数。
4. 递归处理：React 通过深度优先遍历递归处理每个节点及其子节点，Vue 3 也采用类似的策略，但在具体实现上有所不同。

这两个框架的 Diff 算法都是为了在状态或属性变化时高效地更新 DOM，但它们在具体实现细节上有一些不同，主要体现在优化策略和处理方式上。