扩展@Deadfish 的答案。假设您有 10 个待办事项，每个项目都有状态（例如，它是否处于编辑模式）。

在下一个渲染过程中，只剩下 9 个待办事项。例如，因为您删除了其中一项。

现在 react 需要知道原来的 10 个 item 中的哪一个还剩下，所以它可以保留每个 item 的 state，并且只重新渲染改变了 state 的 items。

这就是 react 使用keyfor 的原因。如果使用索引作为键，则原始键为 0..9。新密钥是 0..8。

这可能会导致几个问题：

1. React 总是会得出结论，您删除了列表中的最后一项，这不一定正确。SO上还有其他关于此的帖子，例如这个
2. React 总是会断定这些项目没有改变顺序，所以 React 会认为原始项目 5 的任何状态仍然是项目 5 的状态。但是如果你删除了例如。编号。3，那么所有项目都应该在列表中向上移动。这就是另一个答案所指出的。
3. 如果列表中的项目没有任何状态（只有props）——例如你的待办事项的标题——那么你的渲染将变得非常低效。如果您删除第一个项目，那么 React 将得出结论，所有项目现在都有一个新文本，并将重新渲染所有剩余项目（而不是有效地仅从 DOM 中删除第一个项目）。

采用独特的恒键-所以不只是唯一的单一再现运行，但尤其是不断在多个渲染周期-将保证一切都会按计划，并将确保react有效地更新DOM。

让react键保持不变和唯一总是好的。有时index效果不佳。

让我们考虑这样一个场景，我们有两个组成部分TodoList，并TodoItem在我们的应用程序。该TodoList组件遍历一个todos数组并TodoItem为每个 todo渲染。假设您已打开第二个TodoItem进行编辑。所以它的状态说{editing: true}，它呈现一个输入框而不是标签。

现在，如果您使用了index作为键，那么在删除第二个待办事项时，第三个待办事项将从删除的待办事项中继承状态并显示一个输入框而不是标签。发生这种情况是因为它们共享相同的密钥。

我希望我说清楚了。