React.js中组件键的重要性

Question

我在阅读https://coderwall.com/p/jdybeq/the-importance-of-component-keys-in-react-js的文章时感到奇怪。

它有一个简单的小提琴代码，上面写着 - 如果你没有唯一的常量键，你可能最终会进入

1. 当密钥不是常量时重新创建组件的DOM节点
2. 当密钥不唯一时，重用DOM节点渲染另一个组件

在下面的套装中非常混乱 -

1. 为什么我给key = index（即使它的唯一和常数为什么反应表现得很奇怪？）
2. 当密钥是唯一的但不是常量时会发生什么？（如果不是将密钥删除，它是否检查密钥是否存在于DOM中。）

Answer 1

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

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

现在反应需要知道还剩下哪10个原始项目，因此它可以保留每个项目的状态，并仅重新渲染更改状态的项目。

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

这可能会导致一些问题：

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

使用唯一和常量键 - 在单个渲染运行中不仅仅是唯一，尤其是常量而非多个渲染周期 - 将确保一切按预期工作，并确保有效地响应更新DOM。

Answer 2

让反应键保持恒定和独特总是好的。有时候index无效。

让我们考虑一下我们的应用程序中有两个组件TodoList和TodoItem的情况。 TodoList组件遍历todos数组并为每个待办事项呈现TodoItem。我们假设您已打开第二个TodoItem进行编辑。所以它的状态显示{editing: true}并且它呈现输入框而不是标签。

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

我希望我能说清楚。