React 中键的意义是什么？ [复制]答案

【问题标题】：What is the significance of keys in React? [duplicate]React 中键的意义是什么？ [复制]
【发布时间】：2018-09-21 12:57:31
【问题描述】：

React 中键的意义是什么？我读到在循环中使用索引并不是键的最佳解决方案。为什么？

【问题讨论】：

google 一下，有很多文章告诉你为什么使用它不好：first result on google
我觉得这个问题太笼统了。我认为您应该重新构建您的问题并尝试解释对键没有意义的地方。否则，您只是在吸引将文档反刍给您的答案（您正在获得）。您需要说明您不理解的内容。

标签： javascript reactjs

【解决方案1】：

键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素赋予键，以使元素具有稳定的标识：

发件人：React Documentation - Lists and Keys

如果键是索引，则移动项目会更改它。因此，不受控制的输入之类的组件状态可能会以意想不到的方式混淆和更新。

发件人：React Documentation - Reconciliation

【讨论】：

【解决方案2】：

React 使用键为您渲染的每个 React 元素提供“身份”。当两个元素具有相同的键时，它们被视为相同的元素，否则它们是不同的。当元素在列表中重新排列或移动到渲染函数中的不同位置时，这很有帮助，因此 React 可以执行有效的 DOM 操作以实现您想要的最终结果。 See the docs for more info.

我读到在循环中使用索引并不是键的最佳解决方案。为什么？

因为这与根本不提供列表项的键相同。如果你有一个像 [a, b, c] 这样的列表，那么你删除了中间的一个 [a, c]，如果它们都被索引键控，React 会认为你只是删除了最后一个，而不是中间的那个。

【讨论】：

这是正确的。数组索引可以用作键的唯一用例是，如果您确定在组件的生命周期内只会将项目附加到数组并且永远不会删除项目（最后一个除外），这是非常有限的一。