在 React 里，key 是一个特殊的属性，用来帮助 React 高效地识别哪些元素发生了变化（增删改）。
作用
列表渲染时唯一标识
-
当你用 map 渲染一组组件时，每个元素都要有 key。
-
React 通过 key 来判断元素是否复用。
{list.map(item => (<li key={item.id}>{item.name}</li>
))}
提升渲染性能
-
如果 key 一样，React 认为是“同一个元素”，就会复用旧 DOM 节点。
-
如果 key 不一样，就会卸载旧的，重新创建新的。
正确 key：稳定且唯一（如数据库 id）
错误 key：使用数组下标（可能导致复用错位问题）
避免 UI 错乱
- 如果 key 用不好，会出现表单输入框错乱、动画抖动、状态丢失等情况。
举个例子
const [items, setItems] = useState(['A', 'B', 'C']);// 移除第一个
setItems(['B', 'C']);
用下标作为 key
items.map((item, index) => <li key={index}>{item}</li>)
React 看到 DOM 节点 key 没变，就会复用旧节点，导致数据和 UI 不对应。
用 item 作为 key
items.map(item => <li key={item}>{item}</li>)
React 会发现 A 不见了，正确移除它，B、C 保持稳定。
总结
-
key 是 React diff 算法的核心优化点。
-
作用：唯一标识列表中的元素，帮助 React 高效更新 UI。
-
推荐用 唯一 id，不要用数组下标（除非列表静态且不会变）。