React迭代渲染中两种key赋值方式的核心差异是什么？

核心差异解答 #

key是React专为列表diff算法设计的特殊属性，仅作用于列表渲染（map）返回的最顶层元素/组件，不会作为props透传给子组件，子组件也无法读取到父级传入的key值，两种写法的本质区别就是key的绑定位置是否符合React的规则：

• 方法A是符合规范的正确写法：
  你把key直接绑定在map返回的<el.Component>组件上，这个key会被React直接识别，用于判断列表中每个组件的唯一性。当列表发生增删、排序等变更时，React可以通过key准确匹配组件身份，避免不必要的重渲染，也不会出现组件状态错乱的问题。
• 方法B是错误的写法：
  你把唯一值通过id props传给组件，再在组件内部把key绑定在返回的div上，此时map返回的最顶层<el.Component>本身没有绑定key，React会直接抛出「列表元素缺少key」的警告。同时组件内部div上的key仅对组件内部的列表渲染生效，对外层componentStack的列表diff完全没有作用。如果后续列表发生变更，React无法正确区分每个组件的身份，可能出现状态错位、组件被意外卸载重绘等问题。

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