React中index作为key是反模式？别踩坑了！

2023-10-15 01:27:40







## 为什么index作为key是一个反模式？

在React中，key用于标识列表中的每个元素。当列表中的元素发生变化时，React会使用key来确定哪些元素需要更新，哪些元素可以复用。

如果使用index作为key，当列表中的元素发生变化时，React会认为所有的元素都发生了变化，并重新渲染整个列表。这会导致性能问题，尤其是当列表很长的时候。

## 如何选择一个合适的key？

选择一个合适的key非常重要。一个好的key应该具有以下特点：

* 唯一性：key必须对列表中的每个元素都是唯一的。
* 稳定性：key不能随着时间的推移而改变。
* 简洁性：key应该尽可能的简洁。

在大多数情况下，可以使用元素的ID作为key。如果元素没有ID，可以使用一个随机字符串作为key。

## 避免使用index作为key的示例

以下是一个使用index作为key的示例：

```javascript
const listItems = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

const List = () => {
  return (
    <ul>
      {listItems.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
  );
};

这个示例中，使用index作为key。当列表中的元素发生变化时，React会认为所有的元素都发生了变化，并重新渲染整个列表。

我们可以使用元素的ID作为key来解决这个问题：

const listItems = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

const List = () => {
  return (
    <ul>
      {listItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};