react 中 key 的使用

核心作用

1. 元素识别

   React 通过 key 识别列表元素的唯一性，当列表顺序或内容变化时，能准确判断：

   • 哪些元素需要新增/删除

   • 哪些元素可以复用/移动

2. 状态保留

   确保动态列表中的组件状态（如输入框内容、勾选状态）与正确元素绑定，避免列表顺序变化导致状态错乱

---

正确用法

// 使用数据源中的唯一标识（推荐）
{data.map(item => (
  <Component key={item.id} {...item} />
))}

// 避免使用索引（除非满足特定条件）
{data.map((item, index) => (
  <Component key={index} {...item} />  // ❌ 可能导致问题
))}

---

常见错误

错误场景	后果	解决方案
使用数组索引（动态增删场景）	状态错乱、性能下降	使用数据唯一 ID
随机生成 key（如 Math.random）	完全重新渲染、性能灾难	稳定可预测的标识符
重复 key	React 警告、渲染异常	确保同级元素 key 唯一性

---

最佳实践

1. 数据驱动 key

   优先使用数据本身存在的唯一标识符（如数据库 ID、UUID）

2. 组合 key

   当数据无唯一标识时，可使用多个字段组合：

   key={`${category}-${timestamp}`}

3. 避免 DOM 结构变化

   不要将 key 与可能变化的属性（如排序方式）绑定

---

性能优化示例

// 使用你的数据示例
const DataList = () => {
  return (
    <div>
      {data.map(({ id, label, content }) => (
        <div key={id} className="card">
          <h3>{label}</h3>
          <p>{content}</p>
        </div>
      ))}
    </div>
  );
};

---

注意事项

1. 仅同级需要唯一

   key 只需在兄弟节点间唯一，不同列表可重复使用

2. 不传递 props

   key 不会传递给组件，如需使用相同值需另传 prop：

   <Component key={id} id={id} />

3. 强制刷新

   修改 key 值会强制组件重新挂载（相当于删除旧元素 + 创建新元素）

---

正确使用 key 可以使列表操作的性能提升 3-5 倍（React 官方数据），特别是在处理大型动态列表时，这是 React 开发必须掌握的核心优化技巧。