React列表中如何为每个子元素添加唯一key属性？

1. 先搞懂key的作用 #

React依靠key识别列表里每个元素的唯一性，避免渲染时触发不必要的重排或警告。key得满足稳定、唯一、可预测的要求，尽量别用数组索引（除非列表永远不会增删、排序）。

2. 常见的key添加方式 #

方式一：用数据自带的唯一ID #

如果你的列表数据是后端返回的，一般每条数据都会带唯一标识（比如数据库主键id），直接拿这个当key就行：

const items = [
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' }
];

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

方式二：手动生成唯一key（无自带ID时） #

要是数据本身没唯一标识，可以用第三方库（比如uuid）生成唯一ID，记得提前给数据绑定key，别在渲染时临时生成：
先安装依赖：

npm install uuid

然后使用：

import { v4 as uuidv4 } from 'uuid';

// 提前给数据添上唯一key
const items = ['苹果', '香蕉', '橙子'].map(item => ({
  id: uuidv4(),
  name: item
}));

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

方式三：静态列表临时用索引（不推荐） #

如果列表是完全静态的（不会增删、排序），可以临时用数组索引当key，但这是兜底方案——一旦列表顺序变化，React会误判元素身份，引发性能问题：

const items = ['苹果', '香蕉', '橙子'];

function FruitList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

3. 避坑提醒 #

• key只需要在兄弟元素之间唯一，不用全局唯一
• 别用随机数当key，每次渲染生成新随机数会让React重新创建所有列表元素，拖慢性能
• key要加在列表的直接子元素上，别嵌套到子组件内部的元素里

内容的提问来源于stack exchange，提问作者Soumya ranjan Purohit