不同循环生成的同级React元素key是否仍需唯一？

核心结论 #

同一父元素下的同级元素，只要来自不同的数组（不同循环生成），它们的key不需要唯一——这不是React解析器没检测到，而是key的作用范围本来就限定在「同一个数组/同一次循环生成的列表内部」，不同数组生成的元素属于独立的key上下文，重复key完全合法。

逐个示例分析 #

示例1-3：为什么会报错？ #

这三个示例的本质是一样的：两个带key的元素都是父div的直接同级子元素，不属于任何数组/循环生成的列表。此时React会把它们当作「非列表类同级元素」处理，要求所有直接子元素的key必须唯一（哪怕是手动给非列表元素加key，React也会强制执行唯一性检查），所以重复key会触发错误。

// 报错：直接作为父元素同级子元素的div，key重复
<div>
    <div key="gimme-a-break" />
    <div key="gimme-a-break" />
</div>

// 报错：大括号包裹单个元素，本质还是父元素的直接同级子元素
<div>
    {<div key="gimme-a-break" />}
    {<div key="gimme-a-break" />}
</div>

// 报错：立即执行函数返回的单个元素，最终仍是父元素的直接同级子元素
<div>
    {(() => <div key="gimme-a-break" />)()}
    {(() => <div key="gimme-a-break" />)()}
</div>

示例4：为什么没问题？ #

这个示例里的两个map对应两个独立的数组实例（即使数组内容相同，也是两个不同的数组），每个map生成的是一个独立的列表元素组。React对每个列表内部的元素要求key唯一，但不同列表之间的key不做唯一性约束——因为每个列表的key作用域仅限于自身内部。

// 正常：两个独立map生成的列表，各自维护独立的key上下文
<div>
    {["boo"].map(() => <div key="gimme-a-break" />)}
    {["boo"].map(() => <div key="gimme-a-break" />)}
</div>

官方文档的隐含逻辑 #

你提到的官方文档描述：

Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays.

这段内容已经覆盖了示例4的场景：「two different arrays」就是指两个独立循环对应的数组，哪怕它们最终渲染到同一个父元素下，只要属于不同数组生成的列表，key就可以重复。文档没特意强调「同一父元素下」，但核心规则是key的唯一性约束只针对同一个数组内部的同级元素，和父元素无关。

底层工作原理 #

React在协调（Reconciliation）过程中，会把每个数组生成的列表当作独立的「子元素组」处理。每个组内的元素用key跟踪身份，不同组之间的元素哪怕key相同，React也会认定为不同组的元素，不会混淆它们的更新逻辑。这是因为React处理子元素时，会明确区分「单个元素」和「数组元素（列表）」，列表内部的key约束是完全独立的。

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