扩展@Deadfish答案。假设您有10个待办事项,每个项目都有状态(例如,是否处于编辑模式)。
在下一个渲染过程中,只剩下9个待办事项。例如,因为您删除了一项。
现在,react需要知道原始的10个项目中还有哪些仍然保留,因此它可以保留每个项目的状态,并仅重新渲染状态更改的项目。
那就是反应使用的目的
key。如果使用索引作为键,则原始键为0..9。新的键是0..8。
这可能会导致几个问题:
- React总是会得出结论,您删除了列表中的最后一项,但这不一定是正确的。因此,还有其他关于此的帖子,例如,这一篇
- React总是会断定项目没有更改顺序,因此React会认为原始项目5的任何状态仍将是项目5的状态。编号。3,则所有项目应在列表中上移。这是另一个答案指出的。
- 如果列表中的项目没有任何状态(只有道具)(例如待办事项的标题),则渲染效率将非常低下。如果删除第一个项目,则react会得出结论,即所有项目现在都有一个新文本,并将重新渲染所有剩余项目(而不是有效地从DOM中仅删除第一个项目)。
使用唯一和不变的键-不仅在单个渲染运行中 唯一 ,而且在 多个渲染循环中 尤其 稳定 -可以确保一切按预期工作,并确保有效地更新DOM。



