React Fragment 和空标签(＜＞＜/＞)用法及区别详解

// 1. 显式 Fragment 语法
import React, { Fragment } from 'react';
function ExampleWithFragment() {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Paragraph</p>
    </Fragment>
  );
}
// 2. 短语法（空标签）
function ExampleWithShortSyntax() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

// Fragment 可以接收 key 属性
function ListItems({ items }) {
  return (
    <dl>
      {items.map(item => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}
// 空标签不支持任何属性，包括 key
// 这样会报错
function InvalidExample({ items }) {
  return (
    <dl>
      {items.map(item => (
        <key={item.id}> {/* 错误！不支持属性 */}
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </>
      ))}
    </dl>
  );
}

// Fragment 需要导入
import React, { Fragment } from 'react';
// 空标签不需要导入，直接使用
function NoImportNeeded() {
  return (
    <>
      <div>Item 1</div>
      <div>Item 2</div>
    </>
  );
}

// 使用 Fragment 渲染列表（需要 key）
function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <Fragment key={item.id}>
          <li>{item.name}</li>
          <li>{item.description}</li>
        </Fragment>
      ))}
    </ul>
  );
}
// 简单组合（使用空标签）
function SimpleComponent() {
  return (
    <>
      <header />
      <main />
      <footer />
    </>
  );
}

// 在表格中使用 Fragment
function TableRow({ data }) {
  return (
    <Fragment>
      <td>{data.name}</td>
      <td>{data.age}</td>
      <td>{data.email}</td>
    </Fragment>
  );
}
function Table({ items }) {
  return (
    <table>
      <tbody>
        {items.map(item => (
          <tr key={item.id}>
            <TableRow data={item} />
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ConditionalRender({ isLoggedIn }) {
  return (
    <>
      <Header />
      {isLoggedIn ? (
        <>
          <UserDashboard />
          <UserSettings />
        </>
      ) : (
        <>
          <LoginForm />
          <RegisterLink />
        </>
      )}
      <Footer />
    </>
  );
}

// 使用 Fragment 或空标签不会产生额外的 DOM 节点
function OptimizedStructure() {
  return (
    <>
      <div>First</div>
      <div>Second</div>
    </>
  );
}
// 渲染结果：
// <div>First</div>
// <div>Second</div>
// 而不是：
// <div>
//   <div>First</div>
//   <div>Second</div>
// </div>

// Fragment 和空标签都不会创建额外的 DOM 节点，因此内存使用更少
function MemoryEfficient() {
  return (
    <>
      {Array.from({ length: 1000 }).map((_, index) => (
        <Fragment key={index}>
          <span>Item</span>
          <span>Description</span>
        </Fragment>
      ))}
    </>
  );
}

// 推荐：保持一致的缩进
function GoodStyle() {
  return (
    <>
      <div>Item 1</div>
      <div>Item 2</div>
    </>
  );
}
// 不推荐：混乱的结构
function BadStyle() {
  return <>
    <div>Item 1</div>
      <div>Item 2</div>
    </>;
}

// 在 TypeScript 中使用 Fragment
import React, { Fragment } from 'react';
interface Props {
  items: Array<{ id: string; text: string }>;
}
function TypeScriptExample({ items }: Props) {
  return (
    <>
      {items.map(item => (
        <Fragment key={item.id}>
          <div>{item.text}</div>
        </Fragment>
      ))}
    </>
  );
}

// Fragment 可以嵌套使用
function NestedFragments() {
  return (
    <>
      <div>Level 1</div>
      <Fragment>
        <div>Level 2.1</div>
        <>
          <div>Level 3.1</div>
          <div>Level 3.2</div>
        </>
        <div>Level 2.2</div>
      </Fragment>
    </>
  );
}