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

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>

对片段的基本需求是避免使用额外的父包装器来掩盖其子级。 考虑以下示例:

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> 
   </>
);