react 中 keys 的作用是什么？

在 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，不要用数组下标（除非列表静态且不会变）。