当前位置：首页 > React

react如何比较同级节点

2026-01-24 17:04:02React

React 同级节点比较机制

React 使用 Reconciliation（协调）算法 来高效更新 DOM，其中同级节点的比较是核心部分。同级节点比较主要通过 key 属性 和 节点类型 实现。

同级节点比较规则

基于 key 和 type 的匹配

当两个节点的 key 和 type 相同，React 会复用现有节点，仅更新其属性和子节点。
如果 key 相同但 type 不同，React 会销毁旧节点及其子树，创建新节点。
如果 key 不同，无论 type 是否相同，React 都会视为不同节点，销毁并重建。

无 key 时的默认行为

未设置 key 时，React 默认使用 节点顺序索引（index） 作为隐式 key。
这种方式可能导致性能问题（如列表中间插入节点时，后续节点全部重新渲染）。

优化同级节点比较的方法

为动态列表设置唯一 key

使用唯一标识（如 id）而非数组索引，避免因顺序变化导致的无效更新。
```
{items.map(item => (
<div key={item.id}>{item.name}</div>
))}
```

避免随机 key

随机生成的 key（如 Math.random()）会导致节点无法复用，每次渲染都重建 DOM。

稳定组件类型

避免在渲染过程中动态改变组件类型（如条件渲染中切换 div 和 span），这会触发节点销毁和重建。

示例分析

场景：列表更新

// 旧列表
<ul>
  <li key="a">A</li>
  <li key="b">B</li>
</ul>

// 新列表（插入节点）
<ul>
  <li key="a">A</li>
  <li key="c">C</li>  {/* key 新增，创建新节点 */}
  <li key="b">B</li>  {/* key 存在，复用并更新位置 */}
</ul>

通过唯一 key，React 仅移动 B 而非重建它。

无 key 的陷阱

// 旧列表
<ul>
  <li>First</li>  {/* 隐式 key=0 */}
  <li>Second</li> {/* 隐式 key=1 */}
</ul>

// 新列表（插入头部）
<ul>
  <li>Zero</li>   {/* key=0，内容变化导致整个列表更新 */}
  <li>First</li>  {/* key=1 */}
  <li>Second</li> {/* key=2 */}
</ul>