React：使用索引作为列表中项目的键

Question

使用索引作为列表中项目的键有哪些陷阱？在添加或删除列表中的元素时，React 更改检测或任何意外的列表更新是否存在任何性能缺陷。我已经阅读了几篇有关此的文章，但仍然没有弄清楚。

请参考codepen

为什么在列表开头添加项目会导致上述 codepen 出现意外行为？

另外，据说默认情况下，当没有传递键时，react 会传递索引作为键。这意味着不传递任何键并将索引作为键传递 - 两者是同一件事吗？

Answer 1

这个问题之前已经被问过，

\n\n

但主要答案可以在React 文档中找到

\n\n

\n

如果项目的顺序可能发生变化，我们不建议\xe2\x80\x99 使用键索引。这可能会对性能产生负面影响，并可能导致组件状态出现问题。查看 Robin Pokorny\xe2\x80\x99s 的文章，深入了解使用索引作为键的负面影响。如果您选择不为列表项分配显式键，则 React 将默认使用索引作为键。

\n

\n\n

添加或删除元素时不会出现意外的列表更新

\n\n

但造成这种情况的主要原因是后面的索引和比较的算法，

\n\n

您可以在“不同类型”下阅读相关内容

\n\n

这里的关键是要理解，并非 DOM 中的所有内容在 React“虚拟 DOM”中都有表示，并且，因为 React 不会注意到对 DOM 的直接操作（例如用户更改值或 jQuery 插件监听元素），而不是使用唯一且常量的键最终会导致 React 在键不恒定时重新创建组件的 DOM 节点（并丢失节点中任何未跟踪的状态），或者在键不唯一时重用 DOM 节点来渲染另一个组件（并且将其状态绑定到另一个组件）。

\n\n

这里有一个现场演示，展示了结果有多么糟糕

\n\n

只需添加一个项目，更改它，添加更多项目，看看会发生什么。

\n\n

也可以在这里阅读

\n

Answer 2

你是对的，使用索引作为键可能会出现问题，但请注意，我是说我们可能会遇到问题，但并非总是如此。如果我们不从列表中添加/删除项目，那么可以使用索引作为键，否则最好使用一些唯一标识该项目的 id 。原因是，如果您从列表中添加或删除某些项目，旧项目的索引会发生变化，并且反应可能会混淆哪些项目发生了变化。就性能而言，我认为这没有什么区别