React如何检测迭代块中需添加key prop的JSX根节点？

React的检测逻辑不依赖追踪你是否使用了map/forEach这类迭代方法，而是在虚拟DOM的构建与diff阶段，通过判断最终生成的虚拟DOM结构特征来触发警告，具体流程如下：

• 当React处理父节点的子元素时，若发现子元素是数组类型（不管数组是通过map生成、forEach推入，还是手动直接定义的），就会对这组数组内的子节点做针对性检查。
• 对于数组中的每个子节点，React首先检查是否存在显式声明的key属性。如果没有，会进一步判断这组兄弟节点的类型：
  • 若数组内的子节点是相同类型的元素（比如都是<li>、<div>），React就会抛出Warning: Each child in a list should have a unique "key" prop.的警告。
• 本质上，React默认会用数组索引作为隐式key，但这种方式在元素顺序变更、新增或删除时会引发性能问题和状态异常，所以它会在检测到符合上述条件的子节点组时，强制提示开发者设置显式唯一key。

举个手动定义数组的例子，不用任何迭代方法也会触发同样警告：

export default function List() {
  const listItems = [
    <li>Item 1</li>,
    <li>Item 2</li>,
    <li>Item 3</li>
  ];
  return <ul>{listItems}</ul>;
}

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