[React] 循环渲染中 为什么推荐不用 index 做 key【热度: 320】

[yanlele]

关键词：React 循环渲染问题

在 React 的循环渲染中，不推荐使用数组的index（索引）作为元素的key，主要基于以下几点理由：

1. 列表项顺序的变化：如果列表项的顺序会发生变化（如排序、增加、删除操作），使用index作为key可能会导致性能问题和组件状态的错误。这是因为 React 依赖key来判断哪些元素是新元素、哪些被移除，以及哪些元素的位置发生了变化。当使用index作为key时，即使数据项的内容改变了，key仍然保持不变，导致 React 无法正确识别和优化渲染。

2. 性能问题：当列表项发生变动时，如果使用index作为key，React 可能会做更多的 DOM 操作来更新视图，因为它无法准确地通过key识别哪些元素是新的，哪些元素被移动了位置。这可能导致不必要的重渲染和性能下降。

3. 组件状态的问题：对于使用 state 的组件，如果列表项的顺序改变，使用index作为key可能会导致状态错乱。例如，当你删除一个列表项时，后面的项会移上来，它们的index改变了，如果它们有独立的状态，这时会由于index作为key使得状态与视图匹配错误。

因此，推荐的做法是使用唯一的、稳定的标识符（如数据库中的 id 或者具有唯一性的 hash 值等）作为key，这样无论数据如何变化，每个元素的key都是稳定的，可以帮助 React 更准确、更高效地进行 DOM 的比对和更新。