React Fragment

React.Fragment 是 React 提供的一种机制，允许你分组子元素而不向文档对象模型（DOM）中添加额外的包装节点。它有助于保持 DOM 结构的简洁，并且可以提升性能，特别是在列表或复杂布局中。使用 React.Fragment 可以避免不必要的嵌套和额外的 DOM 元素，从而简化 HTML 结构并提高渲染效率。

语法

React.Fragment 可以通过两种方式使用：通过显式的 <React.Fragment> 标签或者更简洁的缩写形式 <> 和 </>（空标签）。这两种方式在功能上是完全等价的。

使用显式标签

import React from "react";

function MyComponent() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

使用简写形式（推荐）

import React from "react";

function MyComponent() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

关键特性

1. 不添加额外的 DOM 节点

React.Fragment 不会在 DOM 中创建任何额外的元素，这意味着你可以返回多个兄弟元素而不会引入不必要的 <div> 或 <span> 等标签。

2. 支持 key 属性

当在一个循环中使用 React.Fragment 时，你可以为每个片段指定一个 key 属性，这对于列表渲染非常重要，因为 React 需要这个属性来高效地更新列表项。

function Glossary(props) {
  return (
    <dl>
      {props.items.map((item) => (
        // 没有包裹的 div 或 span
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

3. 多子元素返回

在函数组件中，通常你需要返回一个单一的根元素。但是有时候你可能希望返回多个兄弟元素。React.Fragment 正好解决了这个问题，使得你可以合法地返回多个顶级元素。

4. 保持语义化

有时为了样式或布局的目的，你可能会被迫使用无意义的 <div> 或 <span> 来包裹内容。React.Fragment 让你可以保持 HTML 的语义化，同时仍然能够组织你的 JSX 代码。

示例

假设我们有一个简单的表单组件，其中包含两个输入字段。如果不使用 React.Fragment，我们可能需要一个额外的 <div> 来包裹这些字段：

function FormWithoutFragment() {
  return (
    <div>
      <label>
        First Name:
        <input type="text" name="firstName" />
      </label>
      <label>
        Last Name:
        <input type="text" name="lastName" />
      </label>
    </div>
  );
}

使用 React.Fragment 后，我们可以去掉这个多余的 <div>：

function FormWithFragment() {
  return (
    <>
      <label>
        First Name:
        <input type="text" name="firstName" />
      </label>
      <label>
        Last Name:
        <input type="text" name="lastName" />
      </label>
    </>
  );
}

性能优势

虽然现代浏览器对少量的额外 DOM 节点处理得很好，但在某些情况下，比如大型列表或复杂的 UI 布局，减少 DOM 节点的数量确实可以带来性能上的改进。此外，较少的 DOM 层级也意味着更少的 CSS 特异性问题和更容易维护的样式规则。

注意事项

• 不能省略结束标签：即使使用简写的 <> 形式，你也必须提供相应的结束标签 </>。
• key 属性仅适用于映射场景：如果你不在循环中使用 React.Fragment，那么就没有必要为其指定 key 属性。

总结

React.Fragment 是一个简单但非常有用的工具，它帮助开发者编写更加干净、高效的 React 组件。通过避免不必要的 DOM 节点，它可以简化 HTML 结构，同时保持良好的性能。