标准答案
- key 是同级元素之间的身份标识，React diff 时会用它判断哪些元素是同一个。
- 稳定 key 能帮助 React 保留组件状态、输入值、动画状态和 DOM 复用关系。
- 使用 index 作为 key 时，如果列表发生插入、删除、排序或筛选，原来的 index 会对应到不同数据，可能造成状态错位。
- 更好的 key 通常来自后端 id、业务唯一值或创建时生成的稳定 id。
- key 只需要在同一层兄弟节点中唯一，不需要全局唯一，也不会作为普通 props 自动传给子组件。
题目解析
这道题可以用“身份”和“状态复用”解释，而不只是说 key 能提升性能。
index key 最大的问题不是慢，而是数据和组件实例身份错配。表单列表、可编辑行、拖拽排序尤其容易出问题。
如果列表完全静态、不排序、不插入、不删除，index key 的风险较低，但面试里要说明这个前提。
代码示例
下面的写法用业务 id 作为 key，避免排序或删除后状态错位。
TSX
function UserList({ users }: { users: Array<{ id: string; name: string }> }) {
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}常见误区
- 认为 key 只是为了消除控制台 warning，没有理解它会影响组件状态复用。
- 动态列表里随手使用 index，删除或排序后输入框内容和行数据错位。
- 每次渲染用 Math.random() 生成 key，导致 React 认为所有项都是新节点。