react 中 key 的使用

最新推荐文章于 2025-06-19 09:45:00 发布

原创最新推荐文章于 2025-06-19 09:45:00 发布 · 505 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

前端专栏收录该内容

23 篇文章

订阅专栏

核心作用

元素识别
React 通过 key 识别列表元素的唯一性，当列表顺序或内容变化时，能准确判断：
• 哪些元素需要新增/删除
• 哪些元素可以复用/移动
状态保留
确保动态列表中的组件状态（如输入框内容、勾选状态）与正确元素绑定，避免列表顺序变化导致状态错乱

正确用法

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

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

常见错误

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

最佳实践

数据驱动 key
优先使用数据本身存在的唯一标识符（如数据库 ID、UUID）
组合 key
当数据无唯一标识时，可使用多个字段组合：
```
key={`${category}-${timestamp}`}
```
避免 DOM 结构变化
不要将 key 与可能变化的属性（如排序方式）绑定

性能优化示例

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

注意事项

仅同级需要唯一
key 只需在兄弟节点间唯一，不同列表可重复使用
不传递 props
key 不会传递给组件，如需使用相同值需另传 prop：
```
<Component key={id} id={id} />
```
强制刷新
修改 key 值会强制组件重新挂载（相当于删除旧元素 + 创建新元素）

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