在 React 中渲染列表时，为什么不推荐把数组元素的索引 index 直接作为 key 属性的唯一取值？

回答思路

1. 【回答框架 1】key 的主要作用是帮助 React 在更新列表时识别哪些项被增加、删除或重新排序，从而高效地复用组件实例和 DOM 节点。
2. 【回答框架 2】当使用索引作为 key 时，如果列表项的顺序发生改变（例如插入、删除或排序），React 会认为每个位置的组件类型和 key 都没有变，从而可能错误地复用组件实例，导致组件内部状态（如输入框内容）错乱、子组件复用异常等问题。
3. 【回答框架 3】反例说明：比如一个待办事项列表，在列表头部插入一个新项后，原第一项变成第二项，但其 key 仍是 0，React 会认为该项没有变化，可能不会重新渲染其内容或正确更新关联状态。
4. 【回答框架 4】在列表顺序稳定、没有增删或排序操作，且列表项没有内部状态时，使用索引作为 key 通常不会产生问题，但这种场景条件较苛刻，不推荐作为一种通用做法。
5. 【回答框架 5】更稳妥的方案是使用数据项中能够唯一标识该实体的字段（如 id）作为 key，这样即使列表顺序变化，React 也能准确识别每个组件对应的数据，避免状态错乱。
6. 【关键点 1】索引 index 作为 key 在列表顺序变化时可能导致组件状态错乱和渲染错误。
7. 【关键点 2】key 用于 React 的 diff 算法中识别节点复用，应在列表兄弟节点间保持唯一且稳定。
8. 【关键点 3】推荐使用数据中的唯一标识字段（如 id）作为 key，避免依赖可变的索引。
9. 【关键点 4】如果列表完全静态且无顺序变化，使用索引作为 key 尚可，但不推荐作为通用实践。
10. 【关键点 5】不要用随机值作为 key，否则会导致组件频繁重挂载，影响性能。
11. 【易错点 1】存在状态依赖时（如表单输入），索引 key 容易导致状态错乱，应避免。
12. 【易错点 2】使用 index 作为 key，如果列表顺序会因为插入、删除或排序而变化，会引发难以排查的 bug。
13. 【易错点 3】不要误以为 key 必须全局唯一，只需在兄弟节点中唯一即可。