前端知库

列表中的 key 为什么不能随意使用数组下标?

理解元素身份如何影响状态保留和列表更新。

参考答案

key 帮助 React 在同级列表中识别元素身份。插入、删除或排序时,数组下标变化,原有组件状态可能被错误地复用给另一项。

优先使用数据本身稳定、同级唯一的 ID。不要在渲染时使用 Math.random(),这会让每次渲染都产生新身份并重建组件。

对于永不重排、增删且没有身份相关状态的静态列表,下标风险较低。key 不会作为普通 prop 传入子组件;子组件需要 ID 时应另传一个属性。