javascript - 为什么 React 16 中的 Fragments 比容器更好？

Question

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

Answer 1

1. 它的速度稍快一些，内存也更少(不需要创建额外的 DOM 节点)。这仅对非常大和/或很深的树带来真正的好处，但应用程序性能通常会因数千次切割而受到影响。这种减少幅度较小。
2. 一些 CSS 机制，例如 Flexbox 和 CSS Grid，父子之间有特殊的关系，在中间添加 div 会导致在检索逻辑组件时很难保持所需的布局。 DOM 检查器不再那么困惑:-)

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

增加了 JSX 以前不具备的功能

改进了 jsx 的语义标记。如果需要的话，会使用包装器的元素，而不是因为它们是强制的。

不太常见的 dom 布局(提高渲染性能并降低内存成本)

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

以前这是不可能的:

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

再看React 15中的下一个，你无法确定是否需要包装元素:

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