react 中的 Fragment

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

標(biāo)簽渲染

Fragment 標(biāo)簽的使用啊超級(jí)簡(jiǎn)單，就 <Fragment></Fragment> 包裹一下就可以了。

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

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

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

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

我們 F12 看一下 Elements。

我們看到，有一個(gè) id 是 root 的 div 標(biāo)簽，這個(gè)很好理解，就是掛載的 div，也就是 index.html 文字中的那個(gè) div 標(biāo)簽。

那下面那個(gè) div 是哪個(gè)？

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

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

Fragment 標(biāo)簽

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

我們修改一下組件的代碼，使用 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)簽也沒有對(duì)應(yīng)的渲染，而是自動(dòng)忽略掉了。這就是 Fragment 的作用，你需要將幾個(gè)組件包裹，但是有不想多余的渲染出真實(shí)Dom，就可以使用 Fragment 標(biāo)簽包裹。

當(dāng)然，很多開發(fā)者在開發(fā) react 的時(shí)候，像這種地方，他不會(huì)使用 div，當(dāng)然了也不會(huì)使用 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é)點(diǎn)。

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

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

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

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

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

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

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

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

最新評(píng)論