React 18.2.0中div组件props顺序引发unique key警告差异原因咨询

1. key位置影响警告的核心逻辑 #

React 18.2.0里，key是个特殊属性——它不是给元素用的普通props，是React内部用来识别列表项的标记。

当你把key写在{...{}}这种展开运算符后面时，React的JSX解析器会误判：因为展开运算符一般用来传动态props，它会觉得这个div的子节点可能是动态生成的列表（比如从数组map出来的），于是就触发了“列表子元素需要唯一key”的警告。

但如果把key放在展开运算符前面，React会先认出这个key是属于父div本身的，同时明白div里的子节点是固定的静态元素，不需要额外加key，自然就不会弹警告了。

2. 子节点数量为啥会有影响 #

React的这个key警告只盯着“多个子节点的列表场景”：

• 要是div里只有一个子节点，根本不存在“区分多个列表项”的需求，React犯不上检查key，所以不管你怎么写key，都不会出警告。
• 只有当div里有两个及以上子节点时，React才会去判断这是不是动态列表，这时候key的位置差异才会触发不同的解析逻辑，导致警告时有时无。

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