【react】key值使用 index和id的区别

作者：System 时间：2024年08月08日分类：所有,react native 字数：584

在React中，当你渲染一个列表时，你应该为每个列表项提供一个唯一的key属性。这有助于React在DOM更新时识别哪些项目是新的、改变了位置的或者被删除的。

使用索引(index)作为key的问题在于，如果列表项的顺序发生变化，那么这些项的key就会随着它们的位置改变，这可能会导致性能问题，因为React可能会错误地比对元素，或者在不必要的情况下重新渲染组件。

使用唯一ID(id)作为key的优点在于，即使列表项的顺序变化，只要ID是唯一的，React就可以正确地识别和比对元素，不会因为位置变动而造成不必要的重新渲染。

示例代码：

使用索引作为key（不推荐）：




{items.map((item, index) =>
  <li key={index}>{item.name}</li>
)}

使用ID作为key（推荐）：




{items.map((item) =>
  <li key={item.id}>{item.name}</li>
)}

在这两个例子中，items是一个数组，包含有一个id属性（推荐使用）或者其他唯一标识的对象。如果没有ID，也可以使用其他唯一标识作为key，但这通常不如ID可靠。