詳解React中Fragment的簡單使用

更新時間：2022年10月17日 08:17:22 作者：我是ed

這篇文章主要介紹了詳解React中Fragment的簡單使用，文中通過示例代碼介紹的非常詳細，對我們學習React有一定的幫助，感興趣的小伙伴們可以參考一下

react 中的 Fragment

今天說的這一小節(jié)超級簡單，但是呢，不說還不行，因為在實際開發(fā)項目當中你會確確實實的發(fā)現(xiàn)有這樣一個使用場景，很多人都會寫，所以說盡管不影響我們的實際開發(fā)，但別人確實會這樣操作，為了能更好的看清項目代碼，稍微提一嘴吧。

標簽渲染

Fragment 標簽的使用啊超級簡單，就 <Fragment></Fragment> 包裹一下就可以了。

首先我們現(xiàn)在簡單的寫一個組件，然后直接掛載在根組件下面。

// 創(chuàng)建外殼組件
import React, { Component } from "react";

// 創(chuàng)建并暴露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 是可以省略掉的，但是如果這個組件中有兩個標簽，那組件根節(jié)點的 div 就不允許省略?。。?！

那不省略的話，每次 react 渲染完，每個組件都會多渲染一個根 div 的話層級結(jié)構(gòu)會不會顯得很亂??！答案是會的，能不能解決一下子？可以的！這時候就使用到了我們今天說的 Fragment 標簽。

Fragment 標簽

怎么理解哈，你就想象，F(xiàn)ragment 標簽就是一個簡單的標簽，在 react 項目中就充當組件根節(jié)點的 div 使用。只要使用 Fragment 標簽，那么在 react 中渲染的時候，都會被自動忽略掉，不會被渲染。

我們修改一下組件的代碼，使用 Fragment 標簽，首先 Fragment 標簽需要引入才可以使用的。

// 創(chuàng)建外殼組件
import React, { Component, Fragment } from "react";

// 創(chuàng)建并暴露APP組件
export default class App extends Component {

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

我們將組件根標簽 div 替換成了 Fragment 標簽，我們看一下效果：

我們看到哈，我們使用了 Fragment 之后呢，組件根 div 沒有了，但是呢，我們寫的 Fragment 標簽也沒有對應的渲染，而是自動忽略掉了。這就是 Fragment 的作用，你需要將幾個組件包裹，但是有不想多余的渲染出真實Dom，就可以使用 Fragment 標簽包裹。

當然，很多開發(fā)者在開發(fā) react 的時候，像這種地方，他不會使用 div，當然了也不會使用 Fragment 標簽，而是 <></> 空標簽。

我們改一下代碼哈！不使用 Fragment 標簽了，直接寫空標簽看一下有什么作用：

// 創(chuàng)建外殼組件
import React, { Component, Fragment } from "react";

// 創(chuàng)建并暴露APP組件
export default class App extends Component {

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

我們看一下效果：