🧩 React Fragment 的底层原理:为什么它能“包裹却不包裹”?

🧩 React Fragment 的底层原理:为什么它能"包裹却不包裹"?

你是否好奇,为什么 <Fragment> 可以像个"幽灵容器"一样不渲染任何 HTML,却又能同时包裹多个元素?本篇文章将带你一探 React Fragment 的底层奥秘!


🌟 前言:为什么需要 Fragment?

在早期的 React 中,我们写组件时遇到一个经典问题:

javascript 复制代码
// ❌ 错误:JSX 必须有一个根节点
return (
  <h1>标题</h1>
  <p>段落</p>
);

JSX 只能返回一个根节点,为了规避报错,我们常常不得不这样写:

javascript 复制代码
// ✅ 有效但冗余的 div
return (
  <div>
    <h1>标题</h1>
    <p>段落</p>
  </div>
);

但是,这种多余的 <div> 会污染 DOM 结构,不利于样式控制和性能优化。为此,React 引入了 Fragment ------一个"看得见但摸不着"的神秘容器。


👻 什么是 Fragment?

<Fragment> 是 React 提供的一个特殊组件,它 允许你返回多个子元素而不额外包裹 DOM 元素

javascript 复制代码
import React, { Fragment } from 'react';

return (
  <Fragment>
    <h1>标题</h1>
    <p>段落</p>
  </Fragment>
);

或者使用更简洁的写法(空标签):

xml 复制代码
<>
  <h1>标题</h1>
  <p>段落</p>
</>

渲染结果👇

css 复制代码
<h1>标题</h1>
<p>段落</p>

没有任何多余的 div 或 span!


🔍 Fragment 背后的工作机制

1. 虚拟 DOM 层:Fragment 是一个"占位节点"

在 React 的虚拟 DOM 中,Fragment 是一种 特殊类型的 Fiber 节点 ,它的 type 并不是 'div',而是一个内部标识:

typescript 复制代码
type FiberNode = {
  type: string | function | Symbol;
  tag: number;
  ...
}

当使用 <Fragment> 时,React 会生成一个 REACT_FRAGMENT_TYPE 类型的 Fiber:

ini 复制代码
const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');

这一类型告诉 React:"这是个 Fragment,不要生成真实 DOM 元素。"


2. 渲染阶段:跳过 Fragment 本身

ReactDOM 的渲染过程中,Fragment Fiber 的作用仅仅是用来 组织它的子节点

  • Fragment 自己不会被转化为 DOM 节点。
  • React 会跳过它,直接递归处理它的子节点。

底层逻辑类似下面伪代码:

scss 复制代码
if (fiber.type === REACT_FRAGMENT_TYPE) {
  // 不创建 DOM 元素,跳过自己
  return renderChildren(fiber.children);
}

3. 为什么可以写成 <> </>

这是 React 对 Fragment 的语法糖,等价于:

xml 复制代码
<>内容</> === <React.Fragment>内容</React.Fragment>

这在 Babel 编译阶段就会转换成:

csharp 复制代码
React.createElement(React.Fragment, null, ...children);

📦 Fragment 的高级玩法

1. keyed Fragment(带 key 的 Fragment)

当你在列表中返回 Fragment 时,可以也应该加上 key

javascript 复制代码
data.map(item => (
  <React.Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.description}</dd>
  </React.Fragment>
));

带 key 的 Fragment 会被 React 正常地用于 Diff 过程,性能更优,避免不必要的重渲染


2. Fragment vs div:性能对比

对比项 Fragment div
是否生成 DOM ❌ 不生成 ✅ 会生成
影响样式 ✅ 无影响 ❌ 可能影响布局
性能 ✅ 更快(跳过生成) ⛔️ 有额外创建成本
使用场景 ✅ 结构包装、列表 ⛔️ 用于样式布局再考虑

🧠 总结一下

问题 解答
Fragment 会不会生成 DOM? 不会。
Fragment 是怎么实现的? 通过虚拟 DOM 中特殊的 REACT_FRAGMENT_TYPE 类型。
它存在的意义? 不污染 DOM,又能返回多个元素。
空标签 <> </> 是什么? React.Fragment 的语法糖。
可以加 key 吗? 可以,尤其在列表中推荐加。

✨ 结尾彩蛋:Fragment 在源码中的位置

你可以在 React 的源码 ReactElement.js 里找到这段:

ini 复制代码
export const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');

而在调和阶段(reconciler)中,也有对 REACT_FRAGMENT_TYPE 的判断分支,用于正确跳过 DOM 创建,专心处理子节点。

相关推荐
web打印社区4 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗4 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长4 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅5 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_5 小时前
Chrome开发者工具
前端·chrome
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
楊无好5 小时前
React中ref
前端·react.js
程琬清君5 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1006 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔666 小时前
flutter实现web端实现效果
前端·flutter