在 React 中，列表渲染时给元素添加 key 属性有什么作用？

回答思路

1. 【回答框架 1】key 是 React 用于识别列表中每一个元素的唯一标识，它帮助 React 在更新列表时高效地比对前后两次渲染的差异，从而精准地复用或重建 DOM 元素。在 Diff 算法中，key 使得 React 能识别出哪些元素被新增、删除、修改或移动，避免了不必要的 DOM 操作。
2. 【回答框架 2】使用 key 时的核心原则是 key 必须在兄弟节点间保持唯一且稳定，通常使用数据中已有的唯一 id 作为 key，而不是使用数组索引。使用索引作为 key 在列表插入、删除或排序时可能导致元素状态错乱，因为索引会随数组变化而改变，React 可能错误地复用组件实例。
3. 【回答框架 3】如果没有提供 key，React 会默认使用数组索引作为 key，这在静态列表中通常没问题，但在动态列表（如可排序、可编辑）中会造成性能问题或状态 bug。key 也可以在列表之外用于强制重置组件的内部状态，比如通过改变 key 来让某个组件重新挂载。
4. 【关键点 1】key 是 React 列表渲染中用于识别元素的唯一标识，是 Diff 算法优化性能的关键。
5. 【关键点 2】key 必须在兄弟节点中唯一且稳定，优先使用数据的唯一 id，避免使用数组索引。
6. 【关键点 3】使用索引作为 key 在列表动态变化时会引起状态错乱和性能下降。
7. 【关键点 4】key 可用于强制重置组件状态，通过改变 key 触发组件重新挂载。
8. 【易错点 1】不要使用数组索引作为 key，特别是在列表项可增删、排序时，会导致组件状态复用错误。
9. 【易错点 2】key 在兄弟节点之间必须唯一，但无需在全局唯一。
10. 【易错点 3】不要将 key 作为 prop 在组件内部访问，React 不会将其传递给组件，需要通过其他方式传递。