React中映射组件与普通组件的key使用差异及原因问询

核心差异 #

手写的<li>是静态固定的元素，数量、顺序、内容都是写死的；而map生成的<li>是动态生成的元素集合，其数量、顺序、内容可能随数据源（比如示例里的数组）变化而改变。

为什么动态生成的列表项需要key？ #

React靠虚拟DOM的diff算法来高效更新真实DOM，这个算法需要准确识别每个元素的“身份”：

• 对于静态列表，元素的位置是固定的，React直接按顺序比对新旧DOM的对应位置即可，不会出错，所以不需要额外标识。
• 对于动态生成的列表，数据源可能随时变化（比如新增元素、删除元素、排序），如果没有key，React只能通过元素在列表中的索引位置来判断身份。这种判断方式会导致两个问题：
  1. 性能浪费：比如数组元素排序后，React会误以为是每个位置的元素内容变了，去更新元素内容，而不是直接移动元素位置，做了没必要的DOM操作。
  2. 状态错位：如果列表项里有带状态的组件（比如输入框），靠索引匹配会导致状态和元素不对应，比如原本第一个输入框的内容会被错误地保留到排序后的第一个位置，引发逻辑混乱。

key的作用就是给每个动态生成的元素一个唯一且稳定的标识，让React能精准追踪每个元素的变化，在diff时正确判断是新增、删除、移动还是更新元素，既提升渲染性能，又避免状态错误。

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