详解React中Fragment的简单使用

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。

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

那下面那个 div 是哪个？

没错，是我们自己写组件包裹的，这里样一看，啊，就为了展示一个 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 标签，我们看一下效果：

我们看到哈，我们使用了 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>
      </>
    )
  }
}

我们看一下效果：

我们看到哈，没有使用 Fragment 标签，只是用 空标签 的话，效果和使用 Fragment 标签是一摸一样的！而且有没有发现啊，如果使用 空标签 的话，还少了引入 Fragment 标签的步骤，更方便了，所以说很多程序员选择使用空标签的方式作为组件的根节点。

但是 Fragment 标签和 空标签 是有区别的。

Fragment 标签和 <></> 区别

想象一下，如果我们需要遍历一个标签，我们使用 Fragment 标签包裹，在 Fragment 标签写 for 循环可以吗？可以！因为 Fragment 可以使用一个参数，就是 key。遍历的时候需要写唯一的 key 值吧？Fragment 允许你使用key。

有人问我写的 name、或者是 class 不可以吗？答案是不可以！

为啥不可以哈，Fragment这个标签啊，他不会渲染真实的 Dom，你可以写啊，但是他没意义啊！因为他不会被渲染出来。所以说他只支持一个树形，就是 key ，目的就是让你循环使用的。

<></> 就不行了，他什么属性也不让你用，所以说，空标签一般只作为一个容器包裹其他标签使用，不能进行循环判断等任何操作。

所以说：如果仅仅是需要一个标签包裹其他的标签，可以使用 真实Dom( div )、 Fragment 和 空标签，但是需要使用循环，不能使用空标签！

到此这篇关于详解React中Fragment的简单使用的文章就介绍到这了,更多相关React Fragment内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！