React 键

key 是一个唯一的标识符。 在 React 中，它用于标识列表中已更改、更新或删除的项。 当我们动态创建组件或用户更改列表时，它非常有用。 它还有助于确定集合中的哪些组件需要重新渲染，而不是每次都重新渲染整个组件集。

应在数组内提供 key，以便为元素提供稳定的标识。 最好选择一个字符串作为 key，唯一标识列表中的项目。 可以通过以下示例理解它。

示例

如果没有为渲染的项提供稳定的 ID，则可以将项的 索引 分配为列表的 key。 可以在下面的示例中显示。

示例

注意：如果项目的顺序将来可能发生变化，则不建议使用索引作为 key。 这会给开发人员造成混淆，并可能导致组件状态出现问题。

将 Keys 与组件一起使用

假设您为 ListItem 创建了一个单独的组件，并从该组件中提取 ListItem。 在这种情况下，您应该在数组中的 <ListItem /> 元素上分配 key，而不是在 ListItem 本身中的 <li> 元素上。 为了避免错误，您必须记住 key 仅在周围数组的上下文中才有意义。 因此，建议您从 map() 函数返回的任何内容都分配一个 key。

示例：不正确的 Key 用法

在给定的示例中，列表已成功渲染。 但我们没有将 key 分配给 map() 迭代器，这不是一个好习惯。

输出

示例：正确的 Key 用法

要纠正上述示例，我们应该将 key 分配给 map() 迭代器。

输出

Key 在同级中的唯一性

我们已经讨论过，数组中的 key 分配必须在其 同级 中是唯一的。 但是，这并不意味着 key 应该是 全局 唯一的。 我们可以使用同一组 key 来生成两个不同的数组。 可以在下面的示例中理解它。

示例

输出