日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
在React中實(shí)現(xiàn)條件渲染的5種方法及優(yōu)缺點(diǎn)

 隨著現(xiàn)代Web應(yīng)用的重量從后端轉(zhuǎn)移到前端，我們不得不花更多的時(shí)間去考慮性能優(yōu)化。在實(shí)現(xiàn)條件渲染時(shí)也是如此。

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)服務(wù)體系，各種行業(yè)企業(yè)客戶(hù)提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

所以，試著花適量的時(shí)間來(lái)優(yōu)化你的代碼，同時(shí)盡可能多地推動(dòng)重用組件。這將幫助你在質(zhì)量和交付時(shí)間之間取得適當(dāng)?shù)钠胶狻?/p>

[[327628]]

1. if-else

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

/ Example /

 
 
    
  
  
  1. var globalVar = true 
    2. 
  
  
  2. function App() { 
    3. 
  
  
  3.   if(globalVar) { 
    4. 
  
  
  4.     return 
    If Rendering
     
    5. 
  
  
  5.   } else { 
    6. 
  
  
  6.     return 
    Else Rendering
     
    7. 
  
  
  7.   } 
    8. 
  
  
  8. } 
    9.

 

/ 性能 /

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

讓我們研究以下示例：

 
 
    
  
  
  1. render() { 
    2. 
  
  
  2.   if(props.showA) { 
    3. 
  
  
  3.     return ( 
    4. 
  
  
  4.        
    5. 
  
  
  5.        
    6. 
  
  
  6.        
    7. 
  
  
  7.     ) 
    8. 
  
  
  8.       } 
    9. 
  
  
  9.   return ( 
    10. 
  
  
  10.      
    11. 
  
  
  11.      
    12. 
  
  
  12.   ) 
    13. 
  
  
  13. } 
    14.

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

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

這里的問(wèn)題來(lái)自React的差異算法。這個(gè)算法是React用來(lái)知道何時(shí)避免浪費(fèi)渲染的算法。

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

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

2.三元運(yùn)算符

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

 
 
    
  
  
  1. condition ? true_cond : false_cond 
    2.

/ Example /

 
 
    
  
  
  1. let cond = true 
    2. 
  
  
  2. function App() { 
    3. 
  
  
  3.   return ( 
    4. 
  
  
  4.     {cond ?  
    5. 
  
  
  5.      
    If Rendering
     
    6. 
  
  
  6.      : 
    7. 
  
  
  7.      
    Else Rendering
     
    8. 
  
  
  8.     } 
    9. 
  
  
  9.   ) 
    10. 
  
  
  10. } 
    11.

 

3.Element變量

Element變量包含JSX元素，因此可以在React組件中的任何地方使用。Element變量使你的代碼更易于閱讀和理解，因?yàn)樗私M件中的多個(gè)return語(yǔ)句。

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

 
 
    
  
  
  1. function App(props) { 
    2. 
  
  
  2.   if(props.loggedIn) { 
    3. 
  
  
  3.     return 
    Logged In
     
    4. 
  
  
  4.   } else { 
    5. 
  
  
  5.     return 
    Not Logged In
     
    6. 
  
  
  6.   } 
    7. 
  
  
  7. } 
    8.

 

在上面的組件中，我們有多個(gè)return語(yǔ)句。我們?cè)贘SX中使用 if-else 來(lái)有條件地呈現(xiàn)部分UI。

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

/ Example /

 
 
    
  
  
  1. function App(props) { 
    2. 
  
  
  2.   let element 
    3. 
  
  
  3.   if(props.loggedIn) { 
    4. 
  
  
  4.     element = 
    Logged In
     
    5. 
  
  
  5.   } else { 
    6. 
  
  
  6.     element = 
    Not Logged In
     
    7. 
  
  
  7.   } 
    8. 
  
  
  8.   return element 
    9. 
  
  
  9. } 
    10.

 

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

通過(guò)使用Element變量，我們使我們的代碼更簡(jiǎn)潔易讀。

/ 性能 /

這里的問(wèn)題與上面的 if-else 項(xiàng)中提到的問(wèn)題相同。

4. AND運(yùn)算符(&&)

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

 
 
    
  
  
  1. left_expr && right_expr 
    2.

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

Example：

 
 
    
  
  
  1. (true && "nnamdi") 
    2. 
  
  
  2. // "nnamdi" 
    3. 
  
  
  3. (true && 1234) 
    4. 
  
  
  4. // 1234 
    5.

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

 
 
    
  
  
  1. (false && "nnamdi") 
    2. 
  
  
  2. // false 
    3. 
  
  
  3. (false && 1234) 
    4. 
  
  
  4. // false 
    5.

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

/ Example /

 
 
    
  
  
  1. function App(props) { 
    2. 
  
  
  2.   return ( 
    3. 
  
  
  3.     
     
    4. 
  
  
  4.     { 
    5. 
  
  
  5.       props.loggedIn &&  
    6. 
  
  
  6.       
    You're logged in as {props.data.username}
     
    7. 
  
  
  7.     } 
    8. 
  
  
  8.     
 
  •   ) 
  • } 

    •  

    我們?cè)贘SX中使用AND運(yùn)算符?；ɡㄌ?hào)使我們能夠在JSX中添加和評(píng)估JS表達(dá)式。

    / 性能 /

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

    5.返回null

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

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

     
 
      
  
  
    1. function App(props) { 
      2. 
  
  
    2.   if(props.noRender) 
      3. 
  
  
    3.     return null 
      4. 
  
  
    4.  
      5. 
  
  
    5.   return ( 
      6. 
  
  
    6.     
      App Component
       
      7. 
  
  
    7.   ) 
      8. 
  
  
    8. } 
      9.

     

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

    請(qǐng)注意，無(wú)論如何，都會(huì)觸發(fā)組件返回null的生命周期方法。

    / 性能 /

    如上所述，盡管返回 null 的組件將不會(huì)渲染任何內(nèi)容，但仍將對(duì)其進(jìn)行評(píng)估。這意味著不必要的計(jì)算可能會(huì)在大型應(yīng)用程序中加起來(lái)相當(dāng)重要。


    分享標(biāo)題：在React中實(shí)現(xiàn)條件渲染的5種方法及優(yōu)缺點(diǎn)
    轉(zhuǎn)載來(lái)于：http://www.5511xx.com/article/djcjjip.html