React中Keys的作用是什么？为何循环中用索引作Keys并非最优解？

嘿，这问题问到点子上了！我来给你唠明白React里Keys的核心作用，还有为啥用循环索引当Key算不上最佳方案～

Keys是React列表渲染里的关键角色，核心作用体现在这几个方面：

• 让React精准识别列表元素：React的虚拟DOM对比算法（Diffing Algorithm）全靠Keys来区分列表里的每个元素。没有Keys的话，React只能挨个对比元素内容，遇到长列表时效率会暴跌。
• 保住组件的状态和上下文：如果列表里的元素是带状态的组件（比如带输入框的项），Keys能确保组件在列表更新时不会被错误复用。举个例子：你在第一个列表项的输入框里输了内容，要是没设Key，当你在列表开头插个新项，原来的第一个组件可能会被当成第二个来复用，输入的内容直接串位，体验拉胯。
• 减少不必要的重渲染：正确的Keys能让React精准定位到变化的元素，只重渲染需要更新的部分，大大提升页面性能。

用索引当Key看起来省事，但在很多场景下会踩坑：

• 元素顺序变动时状态乱套：假设你的列表支持排序、插入或删除操作。比如把第一个元素移到最后，用索引当Key的话，原来索引0的元素现在变成了索引n-1，原来索引1的元素变成了0。React会误以为是元素内容被修改了，而不是位置移动，这会导致组件被错误复用，状态跟着错位——刚才说的输入框串位就是典型例子。
• 触发无意义的重渲染：当列表元素顺序改变，索引作为Key会让React觉得很多元素都“变了”（因为Key变了），于是会卸载旧组件再重新挂载新组件，这比单纯移动元素的开销大太多，性能直接打折。
• 违背Key的设计初衷：React要求Key是唯一且稳定的标识，而索引是动态变化的，每次列表更新索引都可能变动，完全破坏了React基于Key做的Diff优化。

所以最佳实践是用每个元素独有的、稳定的标识当Key，比如后端返回的id字段，这样才能让React的列表渲染高效又靠谱～

内容的提问来源于stack exchange，提问作者Oleksandr Golovatyi