为何在React 中遍历时不建议使用索引作为唯一的key值？请说明原因与场景？

【概念释义】

React key 帮助协调（Reconciliation）在列表 diff 时识别「哪一项是同一节点」。用 数组 index 作 key 时，若列表发生插入、删除、重排，index 与数据项的对应关系会变，React 可能错误复用 DOM/组件实例，导致输入框内容错位、动画异常、内部 state 串数据。稳定业务 id 才是正确 key。

【基础使用】

"qb-hl-comment">// 反例：可排序 Todo 用 index
{todos.map((todo, index) => (
  <TodoItem key={index} todo={todo} />
))}