Reactjs JSX的一个根元素概念令人困惑

正如我们熟悉的React JSX一个根元素的概念一样。应该只有一个父标记

 class App extends React.Component {
   render() {
     return (
       <div>
         <h1>Hello {this.props.name}</h1>
         <h2>Start editing me</h2>
       </div>
     )
   }
 }
// this works

类应用程序扩展了React.Component{
render（）{
返回(
你好{this.props.name}
开始编辑我
)
}
}
//这很有效

如果我们这样做，就会产生错误

class App extends React.Component {
  render() {
    return (
      <h1> A </h1>
      <h1> B </h1>
    );
  }
}
// this fails

类应用程序扩展了React.Component{
render（）{
返回(
A.
B
);
}
}
//这失败了

但我尝试了一些不同但相似的方法，效果很好。我返回了jsx数组，不知怎么的，它工作了。我不明白为什么？。如果有人能帮我理解。任何帮助都将不胜感激

class App extends React.Component {
  render() {
    return ([<h4> bcd </h4>, <h4> abc </h4>])
  }
}

// this works.

类应用程序扩展了React.Component{
render（）{
返回（[bcd，abc]）
}
}
//这很有效。

这是一个功能，引用：

现在可以从组件的渲染方法返回元素数组

开发人员一直在咆哮着要包装节点，因此有了这个特性

---

正如文档中提到的，不要忘了添加键。

当您刚刚执行最后一个返回数组的代码段时，它们会做什么神奇的事情？当它们检测到返回的东西是数组时，它们会自动放置包装器吗？