在 React.js 0.12 版本中，this.key 是一个非常重要的概念。它用于在 JSX 中为元素提供唯一标识符，以帮助 React 更高效地更新组件树。
key 的作用
React 使用 key 来标识每个子元素，以便在进行 Diff 算法时能够更准确地识别哪些元素需要重新渲染。如果没有指定 key，React 就会默认使用数组索引作为标识符，这可能会导致性能问题和不稳定的行为。
举个例子，假设有一个 TodoList 组件，它接收一个 todoItems 数组作为 props，并将其映射成一组 TodoItem 子组件：
-------- --------------- -
----- - --------- - - ------
------ -
----
--------------------- -- -
--------- ------------- ----------- --
---
-----
--
-在上面的代码中，我们通过指定 key={item.id} 将每个 TodoItem 标识为唯一元素。这样一来，当 todoItems 更新时，React 就能够更加准确地识别出哪些元素需要添加、删除或更新。
key 的注意事项
key必须是唯一的：同一个父元素下的兄弟元素之间必须有不同的key值。key只是在兄弟元素之间必须唯一，而不需要全局唯一：不同组件之间的key值可以重复，因为它们彼此独立。- 不要使用随机数作为
key的值：这可能会导致性能问题和不稳定的行为。最好使用每个元素本身就具备的唯一标识符，例如 ID。 - 不要将
key当作 props 传递给子组件：React 会自动处理key，并将其从 props 中排除。
示例代码
下面是一个示例，演示了如何在 React.js 0.12 中使用 key：
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -
- --- -- ----- ---- ----- --
- --- -- ----- ----- --- ---- --
- --- -- ----- --- -------- -
-
--
-
------------ - ---- -- -
------------------------- -- --
---------- --------------------------------- -- ------- --- ---
----
--
-------- -
----- - --------- - - -----------
------ -
----
--------------------- -- -
--------- ------------- ----------- ---------------------------- --
---
-----
--
-
-
----- -------- ------- --------------- -
------------ - -- -- -
----- - ----- -------- - - -----------
------------------
--
-------- -
----- - ---- - - -----------
------ -
----
----------- ------- -------------------------------------------
-----
--
-
-在上面的示例中，TodoList 组件接收一个 todoItems 数组作为 props，并将其映射成一组 TodoItem 子组件。在每个 TodoItem 上，我们都指定了一个唯一的 key 值，以帮助 React 更准确地更新组件树。同时，每个 TodoItem 还接收一个 onDelete 回调函数作为 props，以便在删除时更新 todoItems。
结论
在 React.js 0.12 中，this.key 是一个非常重要的概念，它
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24056