为什么 React 16 中的 Fragments 比容器更好？答案

【问题标题】：Why Fragments in React 16 is better than containers?为什么 React 16 中的 Fragments 比容器更好？
【发布时间】：2018-08-12 03:55:28
【问题描述】：

所以，我深入学习 React，现在我正在研究 React Fragments。正如官方文档https://reactjs.org/docs/fragments.html 中所述，片段是返回多个元素的非常有趣的方式。但是我想不通它比通常的组件和通过它转移孩子更好吗？

【问题讨论】：

【解决方案1】：

速度稍快，内存更少（无需创建额外的 DOM 节点）。这仅在非常大和/或很深的树上提供真正的好处，但应用程序性能通常会因数千次削减而死亡。这种减少较少。
一些CSS机制，比如Flexbox和CSS Grid，父子关系有特殊的关系，中间加一个div，在检索逻辑组件时很难保持想要的布局。 DOM 检查器不那么杂乱：-)

在这个 React 问题中，你可以找到一些其他用途的描述：https://github.com/facebook/react/issues/2127

这很简单，当您不需要外壳元素时，您就不必使用它。如果考虑到更少的元素，但我认为最大的优势是它们可以在 jsx 中显示以前不可能的元素，并为 shell 元素添加更好的语义值，因为现在它们是可选的。

以前是不可能的：

<span>
  {this.renderOptions ()}
</span>

看React 15中的next，你无法确定是否需要包装元素：

<span>
  <h1> Hello </ h1>
  {this.getContent ()}
</span>

【讨论】：

【解决方案2】：

对片段的基本需求是避免使用额外的父包装器，该包装器只是为了掩盖它的子级而存在。考虑以下示例：

return (
  <div>
      <h1>Hello World!</h1>
      <h2>Enjoy your life!</h2>
  </div>
);

现在，人们可以争辩说不需要额外的div，他/她宁愿删除它。这就是fragments 出现的地方。它增加了删除父包装器并将子代作为数组从 return 语句中传递的功能。有了片段，上面的代码就会变成：

return (
   <>
    <h1>Hello World!</h1>
    <h2>Enjoy your life!</h2> 
   </>
);

【讨论】：