用途:指导 React 列表中 key 属性的正确使用,避免因 key 不当导致的组件重建与状态错乱。
主要原则:key 在 React 协调过程中为列表元素提供稳定身份,应始终来自数据中的唯一、稳定标识符,绝不要对动态列表使用数组索引。
主要建议:渲染时应始终提供 key;优先使用数据中的唯一稳定 id;若数据本身没有 id,可在数据加载时一次性生成,如使用 nanoid 或 uuid。
索引作为 key 仅在同时满足以下全部条件时可接受:列表完全静态、除末尾外从不添加或删除项、顺序永不改变、项没有内部状态。
应避免的反模式:不在渲染期间生成 key(如 Math.random()、Date.now()),否则每次渲染都会新建 key,导致所有组件被销毁并重建;不对动态列表使用索引,因为索引代表位置而非数据身份,在开头或中间增删、排序过滤、项含内部状态(如表单输入)时会出错;不要用 React 的 useId() 作为列表 key,它主要用于无障碍场景(如关联 label 与 input)。