为什么列表项需要 key，而不是使用 index？

当您render一个列表时，React 需要一种方式来了解 哪个项目是哪个 以在render之间能够正确地重用、重新排序、插入或删除DOM节点。key 就是那个身份。

{users.map(user => (
  <Row key={user.id} user={user} /> // stable, unique id
))}

为什么这很重要

使用index作为key会告诉React「位置0的项目和之前一样」——这在列表重新排序或从前面插入/删除时会立即中断：

// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.

实际症状：一个input列表，其中在一行中输入在删除/排序后会"跳"到另一行，因为React重用了错误的<input>（及其内部value/focus）。

规则

• 使用来自您数据的 稳定、唯一的 id（user.id、slug）。
• index 仅适用于 静态列表，该列表从不重新排序、插入或删除。
• 键在 兄弟节点之间 必须唯一（不是全局的）。

Key是对reconciliation算法的提示；正确获取它们可以保持性能和组件状态都正确。