react 中的 Fragment

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

標(biāo)簽渲染

Fragment 標(biāo)簽的使用啊超級簡單，就 <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 標(biāo)簽，這個很好理解，就是掛載的 div，也就是 index.html 文字中的那個 div 標(biāo)簽。

那下面那個 div 是哪個？

沒錯，是我們自己寫組件包裹的，這里樣一看，啊，就為了展示一個 h1 標(biāo)簽就嵌套了那么多 div ，太麻煩了，這里可以省略嗎？ 可以，因為組件里面這個 div 里面只包含了一個標(biāo)簽啊，所以說組件中的 div 是可以省略掉的，但是如果這個組件中有兩個標(biāo)簽，那組件根節(jié)點的 div 就不允許省略?。。?！

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

Fragment 標(biāo)簽

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

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

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

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

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

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

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

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

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

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

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

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

我們看一下效果：

我們看到哈，沒有使用 Fragment 標(biāo)簽，只是用 空標(biāo)簽 的話，效果和使用 Fragment 標(biāo)簽是一摸一樣的！而且有沒有發(fā)現(xiàn)啊，如果使用 空標(biāo)簽 的話，還少了引入 Fragment 標(biāo)簽的步驟，更方便了，所以說很多程序員選擇使用空標(biāo)簽的方式作為組件的根節(jié)點。

但是 Fragment 標(biāo)簽和 空標(biāo)簽 是有區(qū)別的。

Fragment 標(biāo)簽和 <></> 區(qū)別

想象一下，如果我們需要遍歷一個標(biāo)簽，我們使用 Fragment 標(biāo)簽包裹，在 Fragment 標(biāo)簽寫 for 循環(huán)可以嗎？可以！因為 Fragment 可以使用一個參數(shù)，就是 key。遍歷的時候需要寫唯一的 key 值吧？Fragment 允許你使用key。

有人問我寫的 name、或者是 class 不可以嗎？答案是不可以！

為啥不可以哈，Fragment這個標(biāo)簽啊，他不會渲染真實的 Dom，你可以寫啊，但是他沒意義啊！因為他不會被渲染出來。所以說他只支持一個樹形，就是 key ，目的就是讓你循環(huán)使用的。

<></> 就不行了，他什么屬性也不讓你用，所以說，空標(biāo)簽一般只作為一個容器包裹其他標(biāo)簽使用，不能進行循環(huán)判斷等任何操作。

所以說：如果僅僅是需要一個標(biāo)簽包裹其他的標(biāo)簽，可以使用 真實Dom( div )、 Fragment 和 空標(biāo)簽，但是需要使用循環(huán)，不能使用空標(biāo)簽！

到此這篇關(guān)于詳解React中Fragment的簡單使用的文章就介紹到這了,更多相關(guān)React Fragment內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論