React.Children API 解决了哪些 JS.map 做不到的问题？
React.Children 不是为了替代 map，而是为了处理「children 不一定是数组」时的一套安全工具。
在 React 中：
props.children 可以是任何东西：
-
单个元素
-
数组
-
字符串
-
数字
-
null
-
Fragment
-
嵌套结构
但 JavaScript 的 .map() 只能对数组工作。
如果传入的 children 是单个元素，.map() 会直接报错。
例如：
function Comp(props) {return props.children.map(child => child);
}
如果使用时：
<Comp><div>only one</div>
</Comp>
那 props.children 是一个对象而不是数组，会直接报错：
props.children.map is not a function
React.Children.map 的特殊能力
React.Children.map 是 React 提供的安全迭代方法，它保证：
无论 children 是单个元素还是数组，都能正常遍历
React.Children.map(props.children, child => {...})
即使是这样写：
<Comp><span />
</Comp>
它也会把 children 当成长度为 1 的数组处理，避免异常。
React.Children.map 会自动克隆元素并注入 key
React.Children.map 中最常见的用法：
React.Children.map(props.children, (child, index) =>React.cloneElement(child, { key: index })
)
如果你用 JS 的 map：
-
单个 child 会报错
-
key 需要自己处理
-
cloneElement 时可能错漏
React.Children.map 在内部帮你处理了很多 React 特有规则。
保证 children 的类型稳定性（React Fiber 的一致性要求）
React.Children API 是为 React Fiber 调度设计的：
-
保证 children 的结构按 React 预期方式遍历
-
保证 key、ref、owner 的一致性
-
保证 nested children（嵌套结构）按 React 的规范被平铺展开
而 Array.map 没法保证这些。
尤其是在构建组件库时非常重要
例如做一个
<Tabs><Tab label="A" /><Tab label="B" /><Tab label="C" />
</Tabs>
你永远不知道用户实际怎样写 children：
-
单个 Tab
-
多个 Tab
-
条件渲染后为 null 的 Tab
-
片段 Fragment 包裹
用 React.Children.map 你就不需要手动判断类型。
总结：为什么使用 React.Children 而不是直接用 map？
| 需求 | JS map | React.Children.map |
|---|---|---|
| children 可能是单个元素 | ❌ 报错 | ✔ 自动当作数组处理 |
| children 可能包含 null/undefined | ❌ map 会跳过类型异常 | ✔ 安全处理 |
| 保证 key、ref、owner | ❌ 自己处理 | ✔ React 帮你处理 |
| 处理 fragment 或嵌套 children | ❌ map 行为不可控 | ✔ React 规定的方式展开 |
| React Fiber 兼容性 | ❌ 不保证 | ✔ 官方保证 |
如果你写的是基础业务代码，用 map 也 OK；但写公共组件或库，必须使用 React.Children API。