React.Children.count与children.length的差异及选型问题

刚好我之前也踩过类似的坑，来给你掰扯清楚这两个统计子组件数量方法的差异，以及哪个更靠谱——

二者核心差异 #

• 非数组类型children的处理逻辑天差地别
  • 如果父组件只传了单个React元素（比如直接写<SomeChildFC><SingleComponent /></SomeChildFC>），children.length会直接报错——因为单个元素是对象，根本没有length属性；但React.Children.count(children)会正确返回1，它内部会自动识别单个元素、数组甚至null/undefined的情况。
  • 要是children是null或者undefined（比如父组件没传任何子元素），children.length会抛出 TypeError，而React.Children.count会安安稳稳返回0，完全不会崩。
• 对Fragment的识别能力不同
  • 如果你用<>或者<React.Fragment>包裹了多个子元素，children.length只会把整个Fragment当成一个单独的对象，返回1；但React.Children.count会穿透Fragment，统计里面实际的子元素数量，这才是你真正想要的结果。
• 嵌套数组的处理逻辑不同
  • 如果children是嵌套数组（比如你代码里的renderSomething返回的是数组，要是里面还有嵌套的数组结构），children.length只会统计外层数组的长度，不会递归处理；而React.Children.count会递归遍历所有层级的子元素，统计真实的组件总数。

哪个方案更优？ #

毫无疑问**React.Children.count(children)是更优的选择**，原因有这几点：

• 安全性拉满：完全规避了因为children类型不确定（单个元素、null、Fragment）导致的报错问题，毕竟这是React官方专门为处理children这种特殊结构提供的API。
• 符合React的设计思路：children本身就不是标准数组，React提供了React.Children工具集（包括count、forEach、map这些方法），就是为了统一处理children的各种奇葩形态。
• 扩展性更好：如果后续你的组件子元素结构变复杂（比如加了Fragment、嵌套数组），React.Children.count不需要改一行代码就能正确统计，而children.length直接就失效了。

结合你的代码示例修改 #

你的SomeChildFC里可以这样实现统计方法：

const SomeChildFC = ({children}) => { 
  const getMyChildrenCount = () => { 
    return React.Children.count(children);
  } 
  return( <>子组件数量：{getMyChildrenCount()}</> )
}

另外顺便提一句：你代码里的renderSomething函数有个小问题——map回调里没有return元素，应该改成这样：

function renderSomething() { 
  return arrays.map((value,index) => (
    <SomeReactComponent key={index}>{value}</SomeReactComponent> 
  )) 
}

（用括号包裹实现隐式return，或者显式加return关键字都可以）

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