React中怎么實現(xiàn)條件渲染

今天就跟大家聊聊有關(guān)React中怎么實現(xiàn)條件渲染，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、網(wǎng)站制作、定安網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、定安網(wǎng)絡(luò)營銷、定安企業(yè)策劃、定安品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供定安建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：bm7419.com

1. if-else

我們可以將 if-else 條件邏輯應(yīng)用于React中的JSX。請記住，JSX在執(zhí)行之前已編譯為JS，因此我們實際上是在用JS代碼編寫。

/ Example /

var globalVar = true function App() {   if(globalVar) {     return <div>If Rendering</div>   } else {     return <div>Else Rendering</div>   } }

/ 性能 /

if-else 語句可能會導(dǎo)致React中的渲染浪費。這在中小型應(yīng)用中可能感覺不到，但在有成百上千組件的大型應(yīng)用中，性能拖累會相當(dāng)明顯。

讓我們研究以下示例：

render() {   if(props.showA) {     return (       <A />       <B />       <C />     )       }   return (     <B />     <C />   ) }

根據(jù)條件加載組件A，B，C。

如果 showA prop為真，則渲染A，B，C。如果 showA prop 為假，則跳過A并僅渲染B和C。

這里的問題來自React的差異算法。這個算法是React用來知道何時避免浪費渲染的算法。

在初始 showA 為 true 時，組件將按照其結(jié)構(gòu)A-> B-> C進(jìn)行渲染。只要 showA 為 true  且其props不變，React就不會重新渲染。

但是，當(dāng) showA 變?yōu)?false  時，呈現(xiàn)結(jié)構(gòu)將發(fā)生變化，結(jié)構(gòu)將為B->C?，F(xiàn)在，React會看到一個與之前的結(jié)構(gòu)不同的結(jié)構(gòu)，并且會重新渲染(un-mount 和  re-mount)B和C組件，即使它們的props/state保持不變，不需要重新渲染。這是一種浪費的重新渲染。

2.三元運算符

三元運算符是“if-else”條件的縮寫。第一部分說明條件，第二部分則為返回值(如果為true)，最后一部分為返回值(如果為false)。

condition ? true_cond : false_cond

/ Example /

let cond = true function App() {   return (     {cond ?       <div>If Rendering</div>      :      <div>Else Rendering</div>     }   ) }

3.Element變量

Element變量包含JSX元素，因此可以在React組件中的任何地方使用。Element變量使你的代碼更易于閱讀和理解，因為它消除了組件中的多個return語句。

實施此操作的標(biāo)準(zhǔn)方法：

function App(props) {   if(props.loggedIn) {     return <div>Logged In</div>   } else {     return <div>Not Logged In</div>   } }

在上面的組件中，我們有多個return語句。我們在JSX中使用 if-else 來有條件地呈現(xiàn)部分UI。

我們可以使用Element變量來存儲要在條件語句的每個結(jié)果上返回的元素。

/ Example /

function App(props) {   let element   if(props.loggedIn) {     element = <div>Logged In</div>   } else {     element = <div>Not Logged In</div>   }   return element }

根據(jù) if-else 語句的求值，我們使用 element變量 保存要渲染的最后一個元素。

通過使用Element變量，我們使我們的代碼更簡潔易讀。

/ 性能 /

這里的問題與上面的 if-else 項中提到的問題相同。

4. AND運算符(&&)

AND運算符用于檢查其左右表達(dá)式均正確。

left_expr && right_expr

如果表達(dá)式解析為true，則AND運算符將返回正確表達(dá)式的求值。

Example：

(true && "nnamdi") // "nnamdi" (true && 1234) // 1234

另一方面，如果表達(dá)式解析為false，則AND運算符將返回false：

(false && "nnamdi") // false (false && 1234) // false

如果是這種情況，我們可以使用此AND運算符在React中有條件地呈現(xiàn)JSX。

/ Example /

function App(props) {   return (     <div>     {       props.loggedIn &&        <h4>You're logged in as {props.data.username}</h4>     }     </div>   ) }

我們在JSX中使用AND運算符?；ɡㄌ柺刮覀兡軌蛟贘SX中添加和評估JS表達(dá)式。

/ 性能 /

雖然它和前面兩種條件渲染的方式在本質(zhì)上沒有什么區(qū)別，但帶AND(&&)運算符的JSX表達(dá)式被認(rèn)為是一個更好的選擇，因為它在有條件地返回和渲染元素的同時，強制返回相同的結(jié)構(gòu)。

5.返回null

我們可以將組件設(shè)置為返回 null 值而不是JSX表達(dá)式，以便對其進(jìn)行評估，但不會渲染任何內(nèi)容。

當(dāng)組件返回null時，它將阻止React安裝該組件。

function App(props) {   if(props.noRender)     return null    return (     <div>App Component</div>   ) }

如果設(shè)置了noRender屬性，則此組件返回null。因此，如果我們不希望App組件渲染，則將設(shè)置noRender道具 。

看完上述內(nèi)容，你們對React中怎么實現(xiàn)條件渲染有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享標(biāo)題：React中怎么實現(xiàn)條件渲染
轉(zhuǎn)載源于：http://bm7419.com/article36/pcegsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站制作、App設(shè)計、動態(tài)網(wǎng)站、搜索引擎優(yōu)化、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)