为什么React 16中的碎片比容器更好？

Question

所以,我学习React in Depth,现在我正在研究React Fragments.正如官方文档https://reactjs.org/docs/fragments.html中所述,Fragments是返回多个元素的非常有趣的方式.但我无法弄清楚它是否比通常的组件和通过它的孩子转移更好？

Answer 1

1. 它稍微快一点并且内存较少(不需要创建额外的DOM节点).这仅对非常大的树和/或深树提供了真正的好处,但是应用性能通常会因数千次切割而死亡.这种减少更少.
2. 某些CSS机制(如Flexbox和CSS Grid)在父项和子项之间具有特殊关系,并且在中间添加div使得在检索逻辑组件时难以保持所需的布局.DOM检查员不那么杂乱: - )

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

3. 添加了以前JSX不具备的功能
4. 改进了jsx的语义标记.如果需要,使用包装器的元素,不是因为它们是强制的.
5. 不太常见的dom布局(提高渲染性能和降低内存成本)

它就像你不需要shell元素一样简单,你不必使用它.如果你考虑更少的元素,但我认为最大的优点是它们可以在jsx中显示以前不可能的元素,并为shell元素添加更好的语义值,因为现在它们是可选的.

以前不可能:

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

查看React 15中的下一个,您无法确定是否需要包装元素:

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