谈谈React中的Fragment

海底火旺
168 阅读5分钟

揭秘React中<></>语法的威力，提升组件性能与代码可读性

在React开发中，你是否曾遇到过这样的警告："Adjacent JSX elements must be wrapped in an enclosing tag"？这是React强制要求JSX表达式必须有一个父级元素的结果。传统解决方案是添加一个额外的<div>包裹元素，但这会导致不必要的DOM层级。本文将深入探讨React Fragment如何优雅地解决这个问题。

Fragment 包裹容器

Fragment是React提供的一种特殊组件，它允许你将子元素分组而无需向DOM添加额外节点。在JSX中，我们可以使用两种语法表示Fragment：

// 显式语法
import { Fragment } from 'react';

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

// 简写语法（更常用）
function MyComponent() {
  return (
    <>
      <ChildA />
      <ChildB />
    </>
  );
}

这两种写法在功能上完全等效，但简写语法<></>更简洁（Fragment的语法糖），不需要额外导入。

Fragment 解决DOM污染问题

不必要的div包裹

考虑一个列表渲染场景：

// 传统方式 - 需要额外的div包裹
function ItemList() {
  return (
    <div>
      <Item title="React入门" />
      <Item title="React性能优化" />
    </div>
  );
}

// 渲染后的DOM结构
<div>
  <div class="item">React入门</div>
  <div class="item">React性能优化</div>
</div>

这种多余的<div>包裹会导致：

  1. DOM结构：增加无意义的DOM树层级
  2. 性能损耗：增加浏览器渲染负担

Fragment解决方案

使用Fragment可以解决这些问题：

function ItemList() {
  return (
    <>
      <Item title="React入门" />
      <Item title="React性能优化" />
    </>
  );
}

// 渲染后的DOM结构
<div class="item">React入门</div>
<div class="item">React性能优化</div>

Fragment在渲染时不会产生任何实际DOM节点，保持了DOM树的简洁性。

那我们分析分析，为什么Fragment能不渲染

1. React.Fragment 的定义

在 React 源码中，React.Fragment 是一个 Symbol：

const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');

它被导出为 React.Fragment，供开发者使用。

export const Fragment = REACT_FRAGMENT_TYPE;

所以当你写 <React.Fragment> 或 <></> 时，实际上是在使用这个 Symbol 标记。

2. JSX 转换过程

你写的 JSX：

<>
  <h1>标题</h1>
  <p>内容</p>
</>

Babel 会将其转换为：

React.createElement(React.Fragment, null, [
  React.createElement("h1", null, "标题"),
  React.createElement("p", null, "内容")
]);

此时，React 知道这是一个 Fragment 类型的节点，特地分出这个类型就是为了在渲染时分辨并做特殊处理。

3. 渲染阶段的处理

在 React 的 reconciler（协调器）  和 renderer（渲染器）  阶段，当遇到 Fragment 类型时，不会创建真实的 DOM 节点。我们知道React是用diff算法创建fiber节点来形成虚拟DOM，那只要在这里做手脚即可阻止Fragment类型渲染。

简化流程如下：

  • 创建 Fiber 节点时：

    • 如果是 Fragment 类型，则跳过创建 DOM 的步骤。

  • 在 commit 阶段：

    • 直接将子节点插入到父级 DOM 中。

这样就实现了“包裹多个元素但不生成额外 DOM”的效果。

Fragment与文档碎片

原生JavaScript中的文档碎片

在原生JavaScript中的文档碎片（DocumentFragment） ：

<!-- 原生JS使用文档碎片 -->
<script>
  const items = [
    { id: 1, name: '项目1', description: '描述内容...' },
    { id: 2, name: '项目2', description: '描述内容...' }
  ];

  const container = document.getElementById('list');
  const fragment = document.createDocumentFragment();

  items.forEach(item => {
    const wrapper = document.createElement('div');
    // 创建并添加子元素...
    fragment.appendChild(wrapper);
  });

  container.appendChild(fragment);
</script>

文档碎片的关键优势：

  • 批量DOM操作：减少重排(reflow)和重绘(repaint)次数
  • 内存优化：避免频繁操作主DOM树
  • 性能提升：特别适用于大量元素的插入

React Fragment的实现原理

React Fragment的就是借用JavaScript文档碎片发明的。在React内部，Fragment会被处理为一种特殊的虚拟DOM节点：

// React处理Fragment的简化逻辑
function createFragment(children) {
  return {
    type: Symbol.for('react.fragment'),
    props: { children },
    // ...其他内部属性
  };
}

当React渲染组件时，它会识别Fragment类型并直接渲染其子元素，不会创建实际的DOM节点。

Fragment必须参加的用法

列表渲染中的key属性

在渲染列表时，Fragment支持key属性以避免React的警告：

function UserList({ users }) {
  return (
    <>
      {users.map(user => (
        <Fragment key={user.id}>
          <h2 className="username">{user.name}</h2>
          <p className="user-bio">{user.bio}</p>
        </Fragment>
      ))}
    </>
  );
}

key是Fragment唯一支持的属性，使用简写语法<></>时无法添加key，此时必须使用显式<Fragment>语法。

两者的差别也只有key的有无，所以一般情况下还是用<></>的多

条件渲染中的Fragment

Fragment在条件渲染中特别有用，可以避免额外的包裹元素：

function Notification({ type, message }) {
  return (
    <>
      {type === 'error' && <ErrorIcon />}
      {type === 'warning' && <WarningIcon />}
      <span>{message}</span>
    </>
  );
}

组件返回多个根元素

在React 16之前，组件必须返回单个根元素。Fragment打破了这一限制：

function Layout() {
  return (
    <>
      <Header />
      <MainContent />
      <Footer />
    </>
  );
}

在大型应用中，这些微优化累积起来可带来显著的性能提升。根据React团队的数据，使用Fragment可以减少15%的DOM节点数量，提升渲染性能约10%。

最佳实践与使用场景

推荐使用Fragment的场景

  1. 列表渲染：当不需要包裹元素时
  2. 表格结构：避免破坏<table>的合法子元素结构
function Table() {
  return (
    <table>
      <tbody>
        <tr>
          <TableColumns />
        </tr>
      </tbody>
    </table>
  );
}

function TableColumns() {
  return (
    <>
      <td>列1</td>
      <td>列2</td>
      <td>列3</td>
    </>
  );
}
  1. 条件渲染组：多个条件元素并列
  2. 高阶组件：返回多个元素

何时避免使用Fragment

  1. 需要传递ref：Fragment不能附加ref
  2. 需要包裹元素样式：需要实际DOM节点应用样式时
  3. 需要特殊属性：除key外的其他属性

总结

React Fragment通过<></>语法提供了一种优雅的解决方案：

  1. 解决JSX根元素限制：无需添加多余DOM元素
  2. 保持DOM结构清洁：减少不必要的嵌套层级
  3. 提升渲染性能：减少浏览器布局计算负担
  4. 增强代码可读性：使组件结构更清晰直观

随着React 16+的普及，Fragment已成为现代React开发的标准实践。无论是简单的<></>语法还是显式的<Fragment>组件，它们都代表了React设计哲学中的重要理念：提供必要的抽象，同时尊重DOM的本质。

avatar
文章
阅读
粉丝