react如何diff

React 的 Diff 算法原理

React 的 Diff 算法是虚拟 DOM（Virtual DOM）的核心部分，用于高效地比较新旧虚拟 DOM 树的差异，并仅更新实际 DOM 中需要变化的部分。Diff 算法的核心思想是通过分层比较和启发式规则来减少计算复杂度。

Diff 算法的核心策略

同级比较 React 不会跨层级比较节点，而是仅在同一层级的节点之间进行比较。如果发现节点类型不同（例如从 div 变为 span），React 会直接销毁旧节点及其子树，并创建新节点。

Key 的作用 在列表渲染时，key 是帮助 React 识别节点身份的重要属性。稳定的 key 可以让 React 更高效地复用节点，避免不必要的重新渲染。如果 key 不稳定（如使用数组索引），可能会导致性能问题或状态丢失。

节点类型比较 如果节点类型相同（例如同为 div），React 会递归比较其属性和子节点。如果节点类型不同，React 会直接替换整个节点。

Diff 算法的优化策略

双指针优化 React 在比较子节点时使用双指针优化策略，分为以下几种情况：

• 新前与旧前：如果节点相同，直接复用。
• 新后与旧后：如果节点相同，直接复用。
• 新后与旧前：如果节点相同，移动节点到正确位置。
• 新前与旧后：如果节点相同，移动节点到正确位置。

如果以上情况均不匹配，React 会尝试在旧节点中查找是否有相同 key 的节点。如果找到则复用，否则创建新节点。

示例代码

以下是一个简单的列表渲染示例，展示 key 的重要性：

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

性能优化建议

• 为列表项提供稳定且唯一的 key，避免使用数组索引。
• 尽量减少节点层级的嵌套，以降低 Diff 的复杂度。
• 对于复杂组件，可以使用 React.memo 或 shouldComponentUpdate 避免不必要的渲染。