React组件返回多子元素：选React.createElement还是直接返回数组？

我有一个接收原始文本和扩展信息的组件，需要借助这些信息增强文本，最终返回由文本片段和增强型组件组成的数组。

最初我编写了一个转换函数，使用React.createElement返回转换后的内容：

const transform = (text, data) => {
  // 执行转换逻辑
  // ... 

  // 最终得到由文本片段和组件组成的数组
  transformedElements = [
    'text',
    <MyLink>Word</MyLink>,
    'more text',
    <MyLink>AnotherWord</MyLink>,
  ];
  return React.createElement('div', null, transformedElements);
}

之后我将其改写为组件，发现直接返回transformedElements数组也能正常运行：

const Transformed = ({text, data}) => {
  // 执行转换逻辑...
  transformedElements = [
    'text',
    <MyLink>Word</MyLink>,
    'more text',
    <MyLink>AnotherWord</MyLink>,
  ];
  return transformedElements; 
  // 也可以这么写：
  // return React.createElement('div', null, transformedElements);
}

我猜测直接返回数组的性能更优，因为无需调用createElement，二者仅有的差异是直接返回的组件不会被外层容器元素包裹。想请教：我应该调用React.createElement还是直接返回数组？两种方式各有哪些优缺点？

直接返回数组的优缺点 #

• 优点：
  • DOM结构更简洁，少了一层外层div节点，符合语义化原则，避免不必要的嵌套。
  • 减少一次React.createElement调用，理论上性能略优（多数场景下差异可忽略）。
  • 灵活性更高，返回的数组可直接作为其他组件的子元素插入，无需额外处理外层容器。
• 缺点：
  • 无法给整组元素统一设置样式或属性，比如要加统一padding只能逐个处理或在外层父组件设置。
  • 无法直接给整组内容绑定ref，必须加外层容器或用其他方案处理。
  • 部分第三方库/工具可能依赖外层容器元素，直接返回数组可能引发兼容性问题。

使用React.createElement包裹的优缺点 #

• 优点：
  • 可通过外层容器统一控制样式、属性，比如给div加class或style，一次性作用于所有子元素。
  • 方便绑定ref到外层容器，便于后续操作整个内容区块的DOM。
  • 结构更清晰，其他开发者能快速识别这是一个完整的内容区块，可读性更强。
• 缺点：
  • 多了一层不必要的DOM节点，增加DOM树复杂度，极端场景下可能影响渲染性能（通常可忽略）。
  • 多一次createElement调用，虽然性能影响微乎其微，但确实存在额外的函数调用开销。

选择建议 #

• 如果返回内容不需要统一容器样式、ref，也没有依赖外层容器的需求，优先选直接返回数组，更简洁高效。
• 如果需要给整个内容区块设置统一样式、绑定ref，或者团队规范要求组件返回单个根元素，就用React.createElement（或JSX的<div>）包裹。

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