谈谈React 中 Fragment

星辰梦彼岸
297 阅读5分钟

React 中的 Fragment 是一个类似于虚拟 DOM 节点的概念，它依靠于 React 16 以上的版本实现。Fragment 提供了一个强大而简洁的方法，用于组织不产生多余 DOM 节点的组件结构。在使用 React 进行前端开发时，理解并善用 Fragment 可以使你的代码更加高效和优雅。

1. 什么是 Fragment？

在 React 中，Fragment 是一个特殊的组件，主要作用是用来包装多个子元素而不引入额外的 DOM 元素。React 的组件渲染通常会返回一个单一的父元素，这是因为 HTML 和 JSX 的规范要求每个组件只能返回一个根元素。而有时我们需要返回多个元素时，便会使用 Fragment 来解决这个问题，它能有效避免不必要的包裹元素（如 <div>、<span> 等）对页面结构产生影响。

Fragment 的作用并不局限于仅仅作为包装器，它本质上就是一个不渲染任何 DOM 元素的占位符。它帮助我们在返回多个元素时保持 DOM 的简洁和高效。

2. Fragment 的基本使用

React 提供了两种使用 Fragment 的方式：显式使用 <Fragment> 或者使用简写方式 <>。

显式使用 Fragment：

import React, { Fragment } from 'react';

function Example() {
  return (
    <Fragment>
      <h1>标题</h1>

      <p>这是一段文本。</p>

    </Fragment>

  );
}

简写形式：

function Example() {
  return (
    <>
      <h1>标题</h1>

      <p>这是一段文本。</p>

    </>
  );
}

两者效果相同，简写形式只是为了减少代码的冗余，特别是在 JSX 中涉及多个子元素时，它能使代码更简洁。

3. 为什么需要 Fragment？

React 中的组件通常需要返回多个元素，但 HTML 中并不允许存在同级的多个兄弟元素包裹在同一个父元素下。比如，下面的写法是非法的：

// 这是非法的
function Example() {
  return (
    <h1>标题</h1>
    <p>这是一段文本。</p>

  );
}

在这种情况下，如果没有 Fragment，我们通常会用一个额外的 DOM 元素来包裹它们，比如一个 <div>，但这就引入了额外的 DOM 元素，可能会影响页面布局、CSS 样式，甚至影响性能。

使用 Fragment，我们可以避免不必要的 DOM 元素，并且保持结构清晰：

function Example() {
  return (
    <>
      <h1>标题</h1>
      <p>这是一段文本。</p>

    </>
  );
}

这样，React 渲染时只会在最终的 DOM 里看到 h1 和 p，而不会多出一个 <div> 或其他无关的标签。

4. Fragment 的使用场景

  1. 列表渲染中的包装器问题：
    当我们在渲染列表时，每一项通常会包含多个元素。例如：
const list = ['React', 'Vue', 'Angular'];

function Example() {
  return (
    <ul>
      {list.map(item => (
        <Fragment key={item}>
          <li>{item}</li>
          <span>标签</span>
        </Fragment>
      ))}
    </ul>
  );
}

在这个例子中，我们使用 Fragment 来避免为每个列表项创建额外的包裹元素。这在数据量较大时能够显著减少渲染的 DOM 元素数，提高性能。

  1. 避免额外的 DOM 元素：
    在某些 UI 组件中，返回多个兄弟元素是常见的需求。例如，表格行中可能包含多个单元格，但我们不想为每个单元格添加额外的包裹元素，这时候 Fragment 就非常适用。
function TableRow() {
  return (
    <>
      <td>名称</td>
      <td>价格</td>
      <td>数量</td>

    </>
  );
}

这里使用 Fragment 来避免为每个 td 元素添加一个额外的 div 包裹，保持表格结构的简洁。

  1. 条件渲染多个元素：
    在某些场景下，可能会根据不同的条件渲染不同的多个元素，Fragment 可以帮助我们避免复杂的条件嵌套和多余的 HTML 元素。
function ConditionalRendering({ showDetails }) {
  return (
    <>
      <h1>标题</h1>
      {showDetails && <p>这是详细内容。</p>}
    </>
  );
}

这样，如果 showDetails 为 false，React 仅渲染 h1，否则同时渲染 h1 和 p，且不会引入额外的 DOM 结构。

  1. 提高性能：
    虽然 Fragment 本身不会直接优化渲染性能，但它可以通过减少不必要的 DOM 节点，从而间接提升页面渲染性能。特别是在渲染大量元素时，避免不必要的包裹元素能够有效减少 DOM 树的复杂度。

5. Fragment 的注意事项

  1. key 属性的使用： 在使用 Fragment 时，可以直接为其添加 key 属性，这是一个合法的操作，通常在列表渲染中非常有用。例如：
const list = ['React', 'Vue', 'Angular'];

function Example() {
  return (
    <ul>
      {list.map((item) => (
        <Fragment key={item}>
          <li>{item}</li>
          <span>标签</span>
        </Fragment>
      ))}
    </ul>
  );
}

在这个例子中，我们给 Fragment 的直接添加了 key，帮助 React 在更新时高效地比较和重用元素。

  1. Fragment 不能有 ref：Fragment 本身不能传递 ref 属性。由于 Fragment 不会渲染任何额外的 DOM 元素，它不能绑定 ref 来直接引用 DOM 元素。如果需要引用某个具体的 DOM 元素，可以将 ref 直接应用到 Fragment 的子元素上。
const Example = () => {
  const ref = React.createRef();

  return (
    <Fragment>
      <div ref={ref}>内容</div>
    </Fragment>
  );
};

在这个例子中，ref 直接绑定在了 div 元素上，而不是 Fragment 上。

  1. 不适用于条件渲染的复杂场景： 虽然 Fragment 非常适合简单的多子元素包装，但在一些复杂的条件渲染场景中，如果多个分支需要不同的 DOM 元素结构，Fragment 可能会不适合。这时候，可以使用其他的包裹元素或条件渲染来保持结构清晰。
function Example({ showDetails }) {
  return (
    <>
      <h1>标题</h1>
      {showDetails ? <p>详细内容</p> : <span>没有详细内容</span>}
    </>
  );
}

这样，Fragment 能有效避免多余的包裹元素，但在一些更复杂的条件渲染中，可能需要考虑其他方式来组织结构。

6. 总结

React 中的 Fragment 是一个非常有用的工具，它帮助开发者在渲染多个子元素时避免不必要的 DOM 元素，从而使得页面结构更加简洁和高效。它的主要优势在于减少了额外的节点，提高了渲染效率，尤其是在列表渲染、条件渲染和复杂布局中，能够大大减少 DOM 的复杂度。理解和正确使用 Fragment 能够提升代码的可维护性和页面的性能，是 React 开发者必备的技能之一。

avatar
文章
阅读
粉丝