詳解React中Fragment的簡(jiǎn)單使用
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組件設(shè)計(jì)過(guò)程之仿抖音訂單組件
這篇文章主要介紹了React組件設(shè)計(jì)過(guò)程之仿抖音訂單組件的實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07TS裝飾器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-11React + Node.js實(shí)現(xiàn)圖片上傳功能
最近筆者在開(kāi)發(fā)個(gè)人博客的后臺(tái)管理系統(tǒng),里面用到了圖片上傳相關(guān)的功能,在這里記錄并分享一下,希望可以幫到大家,話(huà)不多說(shuō)直接開(kāi)始吧,感興趣的朋友可以參考下2024-01-01React中mobx和redux的區(qū)別及說(shuō)明
這篇文章主要介紹了React中mobx和redux的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06使用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