React篇(031)-什么是 "key" 属性，在元素数组中使用它们有什么好处?

key 是一个特殊的字符串属性，你在创建元素数组时需要包含它。Keys 帮助 React 识别哪些项已更改、添加或删除。

我们通常使用数据中的 IDs 作为 keys:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
)

在渲染列表项时，如果你没有稳定的 IDs，你可能会使用 index 作为 key：

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
)

注意：

1. 由于列表项的顺序可能发生改变，因此并不推荐使用 indexes 作为 keys。这可能会对性能产生负面影响，并可能导致组件状态出现问题。
2. 如果将列表项提取为单独的组件，则在列表组件上应用 keys 而不是 li 标签。
3. 如果在列表项中没有设置 key 属性，在控制台会显示警告消息。