React开发：key prop放在map返回的外层包裹组件还是内层子组件更合理？

两种写法并非单纯的代码风格选择，将key放在map遍历直接返回的组件上有明确的技术依据，存在实际的性能差异，且符合React的官方设计逻辑。

为什么原写法没有触发React的key警告 #

React的key校验仅作用于同一层级下、由map遍历直接返回的元素，不会递归校验嵌套子元素的key。
原代码里map直接返回的元素是<CarouselItemWrapper>，React默认会给这个元素绑定隐式的数组索引作为key，因此不会抛出警告；而内层<CarouselItem>上的key只是作为普通prop传递（styled组件默认会透传所有非原生DOM的prop），完全没有参与React的diff算法的节点身份计算。

两种写法的性能差异 #

原写法的潜在问题 #

• 由于<CarouselItemWrapper>没有显式key，React做diff时会默认用数组索引作为它的身份标识
• 一旦items数组发生新增、删除、排序、筛选操作，索引和实际节点的对应关系会发生错位：比如删除列表第0项，原本索引1的节点会变成索引0，索引2的变成索引1，以此类推
• React会误判所有节点的身份没有变化，只会逐个更新每个节点的prop，而不是复用对应身份的旧节点，导致不必要的DOM更新、组件重渲染，拖慢交互性能
• 如果轮播项包含用户输入、选中状态等内部状态，这种身份错位还会引发状态错乱的功能性bug
• 内层<CarouselItem>上的key完全不生效，因为它和外层的<CarouselItemWrapper>不属于同一层级的可遍历节点，React的diff算法不会把这个key作为身份匹配的依据

调整为指定写法的收益 #

• map直接返回的<CarouselItemWrapper>绑定了显式的item.key，diff时会用这个key作为节点的唯一身份，而非默认的数组索引
• 当items发生动态变化时，React可以精准匹配到对应身份的节点，直接复用旧的DOM实例和组件内部状态，避免不必要的重渲染，大幅提升diff效率和更新性能

关于styled-components的影响 #

该场景和styled-components的特性完全无关：不管是普通自定义组件还是styled组件，React对key的处理逻辑完全一致，key不会作为prop透传到实际DOM节点上，只会被React内部的diff算法消费。

补充说明：如果当前业务场景下items是完全静态的，永远不会发生增删、排序等变动，两种写法在运行时没有可感知的性能差异，但从代码可维护性和后续迭代的风险规避角度，依然推荐将key放在map直接返回的元素上。

内容的提问来源于stack exchange，提问作者p.s.w.g