React 的 Diff 算法是 React 用于高效更新 DOM 的核心机制。其目的是在组件状态更新时，计算出虚拟 DOM 树的新旧版本之间的最小差异，并将这些差异高效地应用到真实 DOM 上。本文将深入讲解 React 的 Diff 算法原理，并提供代码示例以帮助理解。

一、背景与 Diff 算法的意义

传统的 DOM 操作会因为频繁的重排和重绘导致性能瓶颈。React 引入虚拟 DOM 的概念，使用 JavaScript 对象表示 DOM 结构。每次状态变化时，React 会生成新的虚拟 DOM 树，并通过 Diff 算法计算新旧虚拟 DOM 树的差异，再将必要的变更应用到真实 DOM 上。这种方式能够显著减少不必要的 DOM 操作，提高应用性能。

二、Diff 算法的基本策略

React 的 Diff 算法遵循以下三条策略：

1. 树分层比较（Tree Level Diffing） React 只比较同一层级的节点，忽略跨层级的节点移动。跨层级操作会导致旧节点的删除和新节点的创建。
2. 同类型节点复用（Component Level Diffing）
• 如果新旧节点是同类型的组件，则保留旧组件实例并更新其属性。
• 如果是不同类型的组件，则移除旧组件及其子树，重新创建新组件及其子树。
3. 通过 key 优化列表比较（Element Level Diffing） 对于列表类型的节点（如 map 渲染的元素），React 使用 key 属性标识节点，确保即使节点顺序变化，也能正确复用或更新对应的节点。

三、Diff 算法的核心实现

1. 核心函数 reconcileChildFibers

reconcileChildFibers 是 React Diff 算法的核心函数之一，负责对子节点进行对比并生成新的 Fiber 节点。以下是简化版的实现流程：

function reconcileChildFibers(returnFiber, currentFirstChild, newChild) {
if (typeof newChild === 'object' && newChild !== null) {
    switch (newChild.$$typeof) {
      case REACT_ELEMENT_TYPE:
        return reconcileSingleElement(returnFiber, currentFirstChild, newChild);
      case REACT_PORTAL_TYPE:
        return reconcileSinglePortal(returnFiber, currentFirstChild, newChild);
      default:
        break;
    }
  }
// 处理其他类型的情况，比如文本或数组
returnnull;
}

在上述代码中，React 会根据新节点的类型调用不同的处理函数，例如处理单个元素或Portal 的 Diff。

2. 单元素 Diff 示例

当新旧节点是同类型时，React 会复用旧节点并更新其属性，否则直接替换节点。以下是处理单元素的逻辑：

function reconcileSingleElement(returnFiber, currentFirstChild, element) {
  if (currentFirstChild !== null && currentFirstChild.type === element.type) {
    // 类型相同，复用节点
    const existing = useFiber(currentFirstChild, element.props);
    return existing;
  } else {
    // 类型不同，创建新节点
    const newFiber = createFiberFromElement(element);
    return newFiber;
  }
}

四、代码示例

以下是一个简单的 React 组件，展示了 Diff 算法在组件更新中的工作原理。

初始状态

function App() {
  return (
    <div id="root">
      <p className="text">Hello</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}

对应的虚拟 DOM 如下：

const virtualDOM = {
type: 'div',
props: { id: 'root' },
children: [
    { type: 'p', props: { className: 'text' }, children: ['Hello'] },
    {
      type: 'ul',
      children: [
        { type: 'li', children: ['Item 1'] },
        { type: 'li', children: ['Item 2'] },
      ],
    },
  ],
};

更新状态

状态更新后，UI 变为：

function App() {
  return (
    <div id="root">
      <p className="new-text">World</p>
      <ul>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  );
}

React 的 Diff 算法会检测到以下变化：

1. <p> 元素的className 从"text"变为"new-text"，文本内容从"Hello" 变为"World"。React 更新属性和文本。
2. <ul> 中：
• "Item 1" 被移除。
• "Item 2" 被复用。
• "Item 3" 是新增项。

最终只会对真实 DOM 应用这些必要的修改，而非重建整个树。

五、列表 Diff 的优化

对于列表节点，React 强烈建议为每个节点提供唯一的 key。以下是带 key 的列表示例：

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

当列表发生变更时，React 会根据 key 进行以下操作：

1. 如果 key 匹配旧节点，则复用。
2. 如果 key 不存在于新列表，则删除对应的旧节点。
3. 如果 key 不存在于旧列表，则新增对应的新节点。

这种策略避免了误操作，提高了性能。

六、总结

React 的 Diff 算法通过分层比较、同类型节点复用和基于 key 的列表优化等策略，显著减少了 DOM 操作的复杂度。其核心思想是找到虚拟 DOM 树的最小差异，并高效地将这些差异应用到真实 DOM 上。这种机制是 React 高性能的根基，也为复杂交互和实时更新的前端应用提供了强有力的支持。

通过了解 React 的 Diff 算法，我们不仅能深入理解其性能优化原理，还能在开发中更好地利用这些特性，编写更高效的代码。