亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解React中Fragment的簡(jiǎn)單使用

 更新時(shí)間:2022年10月17日 08:17:22   作者:我是ed  
這篇文章主要介紹了詳解React中Fragment的簡(jiǎn)單使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)我們學(xué)習(xí)React有一定的幫助,感興趣的小伙伴們可以參考一下

react 中的 Fragment

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

標(biāo)簽渲染

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

首先我們現(xiàn)在簡(jiǎn)單的寫(xiě)一個(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è)?

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

那不省略的話(huà),每次 react 渲染完,每個(gè)組件都會(huì)多渲染一個(gè) 根 div 的話(huà)層級(jí)結(jié)構(gòu)會(huì)不會(huì)顯得很亂??!答案是會(huì)的,能不能解決一下子?可以的!這時(shí)候就使用到了我們今天說(shuō)的 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 沒(méi)有了,但是呢,我們寫(xiě)的 Fragment 標(biāo)簽也沒(méi)有對(duì)應(yīng)的渲染,而是自動(dòng)忽略掉了。這就是 Fragment 的作用,你需要將幾個(gè)組件包裹,但是有不想多余的渲染出真實(shí)Dom,就可以使用 Fragment 標(biāo)簽包裹。

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

我們改一下代碼哈!不使用 Fragment 標(biāo)簽了,直接寫(xiě)空標(biāo)簽看一下有什么作用:

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

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

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

我們看一下效果:

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

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

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

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

有人問(wèn)我寫(xiě)的 name、或者是 class 不可以嗎?答案是不可以!

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

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

所以說(shuō):如果僅僅是需要一個(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React降級(jí)配置及Ant Design配置詳解

    React降級(jí)配置及Ant Design配置詳解

    這篇文章主要介紹了React降級(jí)配置及Ant Design配置詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12
  • React組件設(shè)計(jì)過(guò)程之仿抖音訂單組件

    React組件設(shè)計(jì)過(guò)程之仿抖音訂單組件

    這篇文章主要介紹了React組件設(shè)計(jì)過(guò)程之仿抖音訂單組件的實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類(lèi)組件中this綁定

    TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類(lèi)組件中this綁定

    這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類(lèi)組件中this綁定,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • React + Node.js實(shí)現(xiàn)圖片上傳功能

    React + Node.js實(shí)現(xiàn)圖片上傳功能

    最近筆者在開(kāi)發(fā)個(gè)人博客的后臺(tái)管理系統(tǒng),里面用到了圖片上傳相關(guān)的功能,在這里記錄并分享一下,希望可以幫到大家,話(huà)不多說(shuō)直接開(kāi)始吧,感興趣的朋友可以參考下
    2024-01-01
  • React事件綁定詳解

    React事件綁定詳解

    這篇文章主要為大家介紹了React事件綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-12-12
  • React中mobx和redux的區(qū)別及說(shuō)明

    React中mobx和redux的區(qū)別及說(shuō)明

    這篇文章主要介紹了React中mobx和redux的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • React項(xiàng)目中不需要jQuery原因分析

    React項(xiàng)目中不需要jQuery原因分析

    在Web開(kāi)發(fā)的早期,jQuery是一個(gè)革命性的庫(kù),它極大地簡(jiǎn)化了DOM操作、事件處理、動(dòng)畫(huà)制作以及Ajax請(qǐng)求等任務(wù),React的出現(xiàn),jQuery在新項(xiàng)目中的必要性開(kāi)始受到質(zhì)疑,本文將探討為什么在React應(yīng)用中不需要jQuery,感興趣的朋友可以參考下
    2024-02-02
  • 使用React18和WebSocket構(gòu)建實(shí)時(shí)通信功能詳解

    使用React18和WebSocket構(gòu)建實(shí)時(shí)通信功能詳解

    WebSocket是一種在Web應(yīng)用中實(shí)現(xiàn)雙向通信的協(xié)議,它允許服務(wù)器主動(dòng)向客戶(hù)端推送數(shù)據(jù),而不需要客戶(hù)端發(fā)起請(qǐng)求,本文將探索如何在React?18應(yīng)用中使用WebSocket來(lái)實(shí)現(xiàn)實(shí)時(shí)通信,感興趣的可以了解下
    2024-01-01
  • 詳細(xì)聊聊React源碼中的位運(yùn)算技巧

    詳細(xì)聊聊React源碼中的位運(yùn)算技巧

    眾所周知在React中,主要用到3種位運(yùn)算符 —— 按位與、按位或、按位非,下面這篇文章主要給大家介紹了關(guān)于React源碼中的位運(yùn)算技巧的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • react封裝全局彈框的方法

    react封裝全局彈框的方法

    這篇文章主要為大家詳細(xì)介紹了react封裝全局彈框的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10

最新評(píng)論