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

Question

所以，我深入学习了 React 现在我正在研究 React 片段。正如官方文档 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

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

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

以前是不可能的：

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

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

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

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