在 React 中，我们经常会使用 map() 函数来生成组件列表。但是，当有多个相同类型的子组件时，React 需要正确地识别这些子组件，以便可以高效地更新它们。这就是需要使用 key 的原因。
什么是 key？
key 是 React 组件中一个特殊的属性。它用于标识组件在列表中的唯一性，并且也可以帮助 React 优化更新过程。
为什么需要 key？
如果没有 key，当我们对列表进行更新操作时，React 会重新渲染整个列表。这将导致很多不必要的计算和 DOM 操作，降低应用的性能。
使用 key 可以告诉 React 哪些元素是新添加的、哪些元素已经被修改了，从而使 React 可以只重新渲染那些发生了变化的元素，提高应用的性能。
key 的规则
key应该是唯一的。在相同的层级中，不能有两个元素拥有相同的key。key不应该包含随机值或会频繁更改的值，比如时间戳，因为这会导致 React 更难以优化。key只需要在兄弟节点之间保持唯一即可。它们不需要在全局中唯一。
如何设置 key？
通常，我们可以使用每个子元素的唯一标识符作为它的 key，比如数据库中的 id。如果没有可靠的唯一标识符，我们也可以使用数组索引作为 key。
以下是使用 map() 函数创建列表时设置 key 的示例代码：
-- -------------------- ---- -------
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- -
--
-------- ---------- -
------ -
-----
--------------- -- -
----- ------------- ---------------- --
---
------
--
-
-------- ------ ---- -- -
------ ------------------
-在上面的例子中，我们使用 id 属性作为每个子组件的 key。
总结
key 是 React 中用于标识组件在列表中唯一性的特殊属性。它可以帮助 React 提高更新效率，提高应用的性能。在设置 key 时，我们应该遵循一些规则，包括保持唯一、不使用随机值等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54025