大白话详细解读React框架的diffing算法

news2025/3/28 7:50:31

1. Diffing 算法是什么？

Diffing 算法是 React 用来比较虚拟 DOM（Virtual DOM）树的一种算法。它的作用是找出前后两次渲染之间的差异（diff），然后只更新这些差异部分，而不是重新渲染整个页面。

简单来说，React 通过 Diffing 算法来“找不同”，然后只更新需要变化的地方，从而提高性能。

2. 为什么需要 Diffing 算法？

在 Web 开发中，直接操作真实 DOM 是非常耗性能的，因为每次 DOM 更新都会触发浏览器的重绘和重排。React 通过虚拟 DOM 和 Diffing 算法来减少对真实 DOM 的操作，从而提高性能。

虚拟 DOM：是真实 DOM 的轻量级副本，用 JavaScript 对象表示。
Diffing 算法：比较新旧虚拟 DOM 树的差异，找出需要更新的部分。

3. Diffing 算法的工作原理

React 的 Diffing 算法基于两个假设：

不同类型的元素会生成不同的树：如果元素类型不同（比如从 <div> 变成 <span>），React 会直接销毁旧树，创建新树。
通过 key 属性来标识子元素：React 使用 key 来识别哪些子元素是相同的，从而减少不必要的更新。

具体来说，Diffing 算法的工作流程如下：

3.1 比较根元素

如果根元素的类型不同，React 会直接销毁旧树，创建新树。

<!-- 旧树 -->
<div>
  <h1>Hello</h1>
</div>

<!-- 新树 -->
<span>
  <h1>Hello</h1>
</span>

这里 <div> 变成了 <span>，React 会直接销毁旧树，创建新树。
如果根元素的类型相同，React 会保留 DOM 节点，只更新变化的属性。

<!-- 旧树 -->
<div className="old">Hello</div>

<!-- 新树 -->
<div className="new">Hello</div>

这里 <div> 的类型相同，React 只会更新 className 属性。

3.2 比较子元素

如果子元素没有 key，React 会按顺序比较子元素。如果顺序变化，可能会导致不必要的更新。

<!-- 旧树 -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

<!-- 新树 -->
<ul>
  <li>Banana</li>
  <li>Apple</li>
</ul>

这里 React 会认为第一个 <li> 从 Apple 变成了 Banana，第二个 <li> 从 Banana 变成了 Apple，导致两个 <li> 都被更新。
如果子元素有 key，React 会通过 key 来识别哪些子元素是相同的，从而减少不必要的更新。

<!-- 旧树 -->
<ul>
  <li key="1">Apple</li>
  <li key="2">Banana</li>
</ul>

<!-- 新树 -->
<ul>
  <li key="2">Banana</li>
  <li key="1">Apple</li>
</ul>

这里 React 通过 key 知道 Apple 和 Banana 只是交换了位置，不会重新创建它们。

4. Diffing 算法的优化策略

React 的 Diffing 算法有一些优化策略，来进一步提高性能：

同级比较：React 只会比较同一层级的节点，不会跨层级比较。这样可以减少比较的复杂度。
key 的作用：通过 key 来标识子元素，React 可以更高效地识别哪些元素是相同的，从而减少不必要的更新。
批量更新：React 会将多个状态更新合并成一次更新，减少对真实 DOM 的操作。

5. Diffing 算法的代码示例

以下是一个简单的例子，展示 React 如何通过 Diffing 算法更新 DOM：

function App() {
  const [items, setItems] = React.useState(['Apple', 'Banana']);

  const reverseItems = () => {
    setItems([...items].reverse());
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={reverseItems}>Reverse</button>
    </div>
  );
}