React 中的 key

key 的核心使命：元素的 “唯一身份”

当列表数据发生变化（增、删、重排）时，React 需要高效地更新真实 DOM。这个过程被称为 协调（Reconciliation）。

key 的存在，能帮助 React 在对比新旧虚拟 DOM 树时：

• 精确识别：快速找出哪些元素是新增的、删除的、移动的。
• 高效复用：最大限度地重用现有的 DOM 节点，而不是销毁重建。

key 的三大原则

1. 唯一性：key 在兄弟节点之间必须是唯一的。同一个列表中不能同时出现两个相同的 key。
2. 稳定性：key 值必须是稳定且可预测的。同一个数据在多次渲染中，其 key 应该保持不变，绝对不要使用 Math.random()、Date.now() 之类的动态生成值。
3. 可关联性：key 应该与列表中的数据项本身相关联。最佳实践是使用数据中自带的唯一 ID，例如：item.id。

为什么不推荐使用 key={index}？

数据变动时的副作用：当列表项被插入、删除或重排时，索引会发生变化，导致 React 误认为某些元素没有变化，从而复用错误的 DOM 节点，可能引发 UI 错乱或状态错误。

何时可使用 index 作为 key？虽然强烈不推荐使用 index 作为 key，但是有些情况下是可以使用的，需满足以下条件：

1. 列表项是完全静态的，它们的内容和顺序永远不会改变。
2. 列表项中确实没有 稳定且唯一的ID 可用。
3. 列表永远不会被重新排序、过滤或在开头/中间增删项目。

key 的另外一个作用：强制组件重新挂载

改变一个组件的 key，会强制 React 销毁旧组件实例，并创建一个全新的组件实例。这意味着组件会重新执行，所有内部状态（state）都会被重置。

状态残留

<UserProfile user={user} />

状态完美重置

// 当 `user.id` 变化时，key 也随之改变，React 会创建一个全新的 UserProfile 组件，所有旧的状态（例如：加载状态、用户信息）都会被自动清除
<UserProfile key={user.id} user={user} />