react如何diff

React Diff 算法原理

React 的 Diff 算法是 Virtual DOM 的核心部分，用于高效更新真实 DOM。其核心思想是通过对比新旧 Virtual DOM 树的差异，最小化 DOM 操作。

Diff 策略

React 采用分层比较的策略，只对同一层次的节点进行比较。如果节点类型不同，直接销毁旧节点并创建新节点。

对于相同类型的节点，React 会递归比较子节点。列表节点的比较采用“key”值优化，通过 key 识别节点的唯一性，减少不必要的重新渲染。

关键优化点

节点类型不同 如果新旧节点类型不同（如从 div 变为 span），React 会直接替换整个节点及其子节点。

相同类型节点 对于类型相同的节点，React 会更新节点的属性（如 className、style 等），而不会重新创建节点。

列表比较 列表节点的 Diff 是性能优化的重点。React 通过 key 值识别节点的稳定性，尽量复用现有节点。如果没有 key，列表顺序变化可能导致不必要的重新渲染。

代码示例

// 列表渲染时使用 key
const items = [{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }];

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

性能建议

为列表项提供稳定且唯一的 key 值，避免使用数组索引作为 key。key 应该是数据本身的唯一标识符，而不是随机数或时间戳。

尽量减少 DOM 树的层级深度，过深的嵌套会增加 Diff 的计算复杂度。合理拆分组件，保持组件结构的扁平化。