如何使用React的Fragment来避免不必要的DOM节点？

在React中，Fragment是一种允许你将子列表分组，而无需向DOM添加额外节点的方式。这是避免在组件树中添加不必要的DOM元素的有用工具。

文末有我帮助400多位同学成功领取到前端offer的场景题哦

使用React Fragment的步骤：

1. 引入Fragment:

2. 如果你使用的是React的较新版本，可以直接在JSX中使用短语法 <> </>。对于旧版本的React或类型严格的环境中，你可能需要从react库中显式引入Fragment。

import React, { Fragment } from 'react';

1. 使用Fragment包裹子元素:

2. 当你需要将多个元素作为单个子元素返回时，可以使用Fragment。

function MyComponent() {
  return (
    <Fragment>
      <div>第一部分</div>
      <div>第二部分</div>
    </Fragment>
  );
}

或者使用短语法：

function MyComponent() {
  return