31、react 中的 Fragment

原创

粘你一身大鼻嘎 2022-10-23 02:13:15 ©著作权

文章标签 空标签 git 实际开发 文章分类 运维

©著作权归作者所有：来自51CTO博客作者粘你一身大鼻嘎的原创作品，请联系作者获取转载授权，否则将追究法律责任

react 中的 Fragment

今天说的这一小节超级简单，但是呢，不说还不行，因为在实际开发项目当中你会确确实实的发现有这样一个使用场景，很多人都会写，所以说尽管不影响我们的实际开发，但别人确实会这样操作，为了能更好的看清项目代码，稍微提一嘴吧。

标签渲染

Fragment 标签的使用啊超级简单，就 <Fragment></Fragment> 包裹一下就可以了。

首先我们现在简单的写一个组件，然后直接挂载在根组件下面。

// 创建外壳组件
import React, { Component } from "react";

// 创建并暴露APP组件
export default class App extends Component {

  render() {
    return (
      <div>
        <h1>我是𝒆𝒅.</h1>
      </div>
    )
  }
}

我们 F12 看一下 Elements。

31、react 中的 Fragment_实际开发

我们看到，有一个 id 是 root 的 div 标签，这个很好理解，就是挂载的 div，也就是 index.html 文字中的那个 div 标签。

31、react 中的 Fragment_实际开发_02

那下面那个 div 是哪个？

31、react 中的 Fragment_空标签_03

没错，是我们自己写组件包裹的，这里样一看，啊，就为了展示一个 h1 标签就嵌套了那么多 div ，太麻烦了，这里可以省略吗？可以，因为组件里面这个 div 里面只包含了一个标签啊，所以说组件中的 div 是可以省略掉的，但是如果这个组件中有两个标签，那组件根节点的 div 就不允许省略！！！！

那不省略的话，每次 react 渲染完，每个组件都会多渲染一个根 div 的话层级结构会不会显得很乱啊！答案是会的，能不能解决一下子？可以的！这时候就使用到了我们今天说的 Fragment 标签。

Fragment 标签

怎么理解哈，你就想象，Fragment 标签就是一个简单的标签，在 react 项目中就充当组件根节点的 div 使用。只要使用 Fragment 标签，那么在 react 中渲染的时候，都会被自动忽略掉，不会被渲染。

我们修改一下组件的代码，使用 Fragment 标签，首先 Fragment 标签需要引入才可以使用的。

// 创建外壳组件
import React, { Component, Fragment } from "react";

// 创建并暴露APP组件
export default class App extends Component {

  render() {
    return (
      <Fragment>
        <h1>我是𝒆𝒅.</h1>
      </Fragment>
    )
  }
}

我们将组件根标签 div 替换成了 Fragment 标签，我们看一下效果：

31、react 中的 Fragment_实际开发_04

我们看到哈，我们使用了 Fragment 之后呢，组件根 div 没有了，但是呢，我们写的 Fragment 标签也没有对应的渲染，而是自动忽略掉了。这就是 Fragment 的作用，你需要将几个组件包裹，但是有不想多余的渲染出真实Dom，就可以使用 Fragment 标签包裹。

当然，很多开发者在开发 react 的时候，像这种地方，他不会使用 div，当然了也不会使用 Fragment 标签，而是 <></> 空标签。

我们改一下代码哈！不使用 Fragment 标签了，直接写空标签看一下有什么作用：

// 创建外壳组件
import React, { Component, Fragment } from "react";

// 创建并暴露APP组件
export default class App extends Component {

  render() {
    return (
      <>
        <h1>我是𝒆𝒅.</h1>
      </>
    )
  }
}