【精通react】（三）为什么不建议使用 index 作为 key？

在 React 中进行列表渲染时，不建议使用 index 作为 key，但某些特定场景下也可以使用。

当列表项包含内部状态 （如输入框内容、焦点等）时，使用 index 作为 key 会导致状态错乱：

示例：假设有一个待办事项列表，用户正在编辑某个输入框。如果在列表中间插入一项，后续项的 index 会变化，React 会认为这些项被"替换"了，导致输入框内容丢失。

jsx 复制代码

// ❌ 错误示例：使用 index 作为 key
{items.map((item, index) => (
  <input key={index} defaultValue={item.text} />
))}

当列表发生局部更新 （如排序、过滤）时，使用 index 会导致 React 无法正确识别元素的移动或重用，从而触发不必要的重渲染或 DOM 操作。

某些依赖 key 的组件逻辑（如动画、表单控件）会因 index 变化而失效。

静态列表

列表永远不会变化，且没有内部状态（如纯展示数据）：
jsx 复制代码
```
{staticData.map((item, index) => (
  <div key={index}>{item}</div>
))}
```
仅追加/删除末尾项

列表变化仅发生在末尾（如聊天消息流），且不涉及排序或中间项修改：
jsx 复制代码
```
// 新消息总是添加到末尾
{messages.map((msg, index) => (
  <div key={index}>{msg}</div>
))}
```
无状态的简单组件

列表项是纯展示组件（如图标、标签），且不涉及交互或状态：
jsx 复制代码
```
{tags.map((tag, index) => (
  <span key={index}>{tag}</span>
))}
```

动态列表（增删/排序/过滤）

列表项频繁变化时，必须使用唯一且稳定的标识符（如数据库 ID）：
jsx 复制代码
```
// ✅ 正确示例：使用唯一 ID 作为 key
{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}
```
包含交互状态的列表项

列表项包含输入框、复选框等状态时，必须用唯一 ID 避免状态丢失：
jsx 复制代码
```
{users.map(user => (
  <input
    key={user.id} // ✅ 唯一且稳定
    defaultValue={user.name}
  />
))}
```
需要动画或过渡效果

React 依赖 key 来跟踪元素身份，若 key 不稳定会导致动画错乱。

全屏复制

优先使用唯一 ID ：

如数据库 ID、UUID 等，确保 key 唯一且稳定。
避免使用 index ：

除非满足特定条件（静态列表、无状态、仅追加末尾）。
特殊情况处理：
- 如果无法获取唯一 ID（如临时数据），可结合 index 与业务逻辑生成临时 ID（如 tempId + index）。
- 使用 React.memo 或 shouldComponentUpdate 优化子组件性能。

通过合理选择 key，可以显著提升 React 应用的性能和稳定性，避免因 index 导致的意外问题。