React 片段

在 React 中，每当您想在屏幕上渲染某些内容时，您需要在组件内使用一个 render 方法。这个 render 方法可以返回 单个 元素或 多个 元素。 render 方法一次只会在其中渲染一个根节点。 但是，如果您想返回多个元素，则 render 方法将需要一个 'div' 标签，并将整个内容或元素放在其中。 这个额外的 DOM 节点有时会导致您的 HTML 输出格式不正确，并且不受许多开发人员的喜爱。

示例

为了解决这个问题，React 从 16.2 及以上版本引入了 Fragments。 Fragments 允许您对子列表进行分组，而无需向 DOM 添加额外的节点。

语法

示例

我们为什么使用 Fragments?

使用 Fragments 标签的主要原因是

1. 与 div 标签相比，它使代码的执行速度更快。
2. 它占用的内存更少。

Fragments 简写语法

对于上述方法，还存在另一种用于声明 fragments 的简写。 它看起来像一个 空 标签，我们可以在其中使用 '<>' 和 '' 而不是 'React.Fragment'。

示例

Keyed Fragments (带有键的 Fragments)

简写语法不接受 key 属性。 您需要一个 key 来将集合映射到 fragments 的数组，例如创建描述列表。 如果您需要提供 keys，您必须使用显式的 <React.Fragment> 语法声明 fragments。

注意：Key 是可以与 Fragments 一起传递的唯一属性。

示例