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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
React你應(yīng)該學(xué)會(huì)的開發(fā)技巧

[[385445]]

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

干凈的代碼不僅僅是工作代碼。簡潔的代碼易于閱讀，易于理解并且井井有條。在本文中，我們將研究六種編寫更簡潔的React代碼的方法。

在閱讀這些建議時(shí)，請(qǐng)務(wù)必記住它們的實(shí)質(zhì)：相信這些實(shí)踐對(duì)我們編寫自己的React代碼很有幫助。讓我們一起學(xué)習(xí)吧!

1.僅針對(duì)一種條件渲染

如果你要為某個(gè)條件成立時(shí)渲染某些元素，請(qǐng)不要使用三元運(yùn)算符。請(qǐng)改用&&運(yùn)算符。

不推薦寫法：

 
 
 
 
    
  
  
  
  
  1. import React, { useState } from 'react' 
    2.   
  
  
  
  2. export const ConditionalRenderingWhenTrueBad = () => { 
    3.   
  
  
  
  3.   const [showConditionalText, setShowConditionalText] = useState(false) 
    4.   
  
  
  
  4.   const handleClick = () => 
    5.   
  
  
  
  5.     setShowConditionalText(showConditionalText => !showConditionalText) 
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.   return ( 
    8.   
  
  
  
  8.     
     
    9.   
  
  
  
  9.       切換文本 
    10.   
  
  
  
  10.       {showConditionalText ? 
    成立顯示內(nèi)容
     : null} 
    11.   
  
  
  
  11.     
 
  •   ) 
  • } 

    • 推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react' 
      2.   
  
  
  
    2. export const ConditionalRenderingWhenTrueGood = () => { 
      3.   
  
  
  
    3.   const [showConditionalText, setShowConditionalText] = useState(false) 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.   const handleClick = () => 
      6.   
  
  
  
    6.     setShowConditionalText(showConditionalText => !showConditionalText) 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8.   return ( 
      9.   
  
  
  
    9.     
       
      10.   
  
  
  
    10.       切換文本 
      11.   
  
  
  
    11.       {showConditionalText && 
      成立顯示內(nèi)容!
      } 
      12.   
  
  
  
    12.     
     
  •   ) 
  • } 

    • 2.Boolean Props簡寫

    isHungry處簡寫了

    不推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React from 'react' 
      2.   
  
  
  
    2. const HungryMessage = ({ isHungry }) => ( 
      3.   
  
  
  
    3.   {isHungry ? 'I am hungry' : 'I am full'} 
      4.   
  
  
  
    4. ) 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6. export const BooleanPropBad = () => ( 
      7.   
  
  
  
    7.   
       
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.      
      10.   
  
  
  
    10.   
     
  • ) 

    • 推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React from 'react' 
      2.   
  
  
  
    2. const HungryMessage = ({ isHungry }) => ( 
      3.   
  
  
  
    3.   {isHungry ? 'I am hungry' : 'I am full'} 
      4.   
  
  
  
    4. ) 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6. export const BooleanPropGood = () => ( 
      7.   
  
  
  
    7.   
       
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.      
      10.   
  
  
  
    10.   
     
  • ) 

    • 3.String Props簡寫

    personName處簡寫了

    不推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React from 'react' 
      2.   
  
  
  
    2. const Greeting = ({ personName }) => 
      Hi, {personName}!
       
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4. export const StringPropValuesBad = () => ( 
      5.   
  
  
  
    5.   
       
      6.   
  
  
  
    6.      
      7.   
  
  
  
    7.      
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.   
     
  • ) 

    • 推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React from 'react' 
      2.   
  
  
  
    2. const Greeting = ({ personName }) => 
      Hi, {personName}!
       
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4. export const StringPropValuesGood = () => ( 
      5.   
  
  
  
    5.   
       
      6.   
  
  
  
    6.      
      7.   
  
  
  
    7.      
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.   
     
  • ) 

    • 4.事件處理函數(shù)簡寫

    onChange處簡寫了

    不推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react' 
      2.   
  
  
  
    2. export const UnnecessaryAnonymousFunctionsBad = () => { 
      3.   
  
  
  
    3.   const [inputValue, setInputValue] = useState('') 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.   const handleChange = e => { 
      6.   
  
  
  
    6.     setInputValue(e.target.value) 
      7.   
  
  
  
    7.   } 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.   return ( 
      10.   
  
  
  
    10.     <> 
      11.   
  
  
  
    11.       Name:  
      12.   
  
  
  
    12.        handleChange(e)} /> 
      13.   
  
  
  
    13.      
      14.   
  
  
  
    14.   ) 
      15.   
  
  
  
    15. } 
      16.

    推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react' 
      2.   
  
  
  
    2. export const UnnecessaryAnonymousFunctionsGood = () => { 
      3.   
  
  
  
    3.   const [inputValue, setInputValue] = useState('') 
      4.   
  
  
  
    4.   const handleChange = e => { 
      5.   
  
  
  
    5.     setInputValue(e.target.value) 
      6.   
  
  
  
    6.   } 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8.   return ( 
      9.   
  
  
  
    9.     <> 
      10.   
  
  
  
    10.       Name:  
      11.   
  
  
  
    11.        
      12.   
  
  
  
    12.      
      13.   
  
  
  
    13.   ) 
      14.   
  
  
  
    14. } 
      15.

    5.組件作為參數(shù)返回

    IconComponent處簡寫了

    不推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React from 'react' 
      2.   
  
  
  
    2. const CircleIcon = () => ( 
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.      
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6. ) 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( 
      9.   
  
  
  
    9.   
       
      10.   
  
  
  
    10.      
      11.   
  
  
  
    11.   
     
  • ) 
  •  
  • export const UnnecessaryAnonymousFunctionComponentsBad = () => ( 
  •    } /> 
  • ) 

    • 推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React from 'react' 
      2.   
  
  
  
    2. const CircleIcon = () => ( 
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.      
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6. ) 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( 
      9.   
  
  
  
    9.   
       
      10.   
  
  
  
    10.      
      11.   
  
  
  
    11.   
     
  • ) 
  •  
  • export const UnnecessaryAnonymousFunctionComponentsGood = () => ( 
  •    
  • ) 

    • 6.設(shè)置依賴于先前pros的pros

    如果新狀態(tài)依賴于先前狀態(tài)，則始終將狀態(tài)設(shè)置為先前狀態(tài)的函數(shù)?？梢耘幚鞷eact狀態(tài)更新，并且不以這種方式編寫更新會(huì)導(dǎo)致意外結(jié)果,setIsDisabled處簡寫

    不推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react' 
      2.   
  
  
  
    2. export const PreviousStateBad = () => { 
      3.   
  
  
  
    3.   const [isDisabled, setIsDisabled] = useState(false) 
      4.   
  
  
  
    4.   const toggleButton = () => setIsDisabled(!isDisabled) 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.   const toggleButton2Times = () => { 
      7.   
  
  
  
    7.     for (let i = 0; i < 2; i++) { 
      8.   
  
  
  
    8.       toggleButton() 
      9.   
  
  
  
    9.     } 
      10.   
  
  
  
    10.   } 
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.   return ( 
      13.   
  
  
  
    13.     
       
      14.   
  
  
  
    14.        
      15.   
  
  
  
    15.         I'm {isDisabled ? 'disabled' : 'enabled'} 
      16.   
  
  
  
    16.        
      17.   
  
  
  
    17.       切換按鈕狀態(tài) 
      18.   
  
  
  
    18.       切換按鈕狀態(tài)2次 
      19.   
  
  
  
    19.     
     
  •   ) 
  • } 

    • 推薦寫法：

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react' 
      2.   
  
  
  
    2. export const PreviousStateGood = () => { 
      3.   
  
  
  
    3.   const [isDisabled, setIsDisabled] = useState(false) 
      4.   
  
  
  
    4.   const toggleButton = () => setIsDisabled(isDisabled => !isDisabled) 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.   const toggleButton2Times = () => { 
      7.   
  
  
  
    7.     for (let i = 0; i < 2; i++) { 
      8.   
  
  
  
    8.       toggleButton() 
      9.   
  
  
  
    9.     } 
      10.   
  
  
  
    10.   } 
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.   return ( 
      13.   
  
  
  
    13.     
       
      14.   
  
  
  
    14.        
      15.   
  
  
  
    15.         I'm {isDisabled ? 'disabled' : 'enabled'} 
      16.   
  
  
  
    16.        
      17.   
  
  
  
    17.       切換按鈕狀態(tài) 
      18.   
  
  
  
    18.       切換按鈕狀態(tài)2次 
      19.   
  
  
  
    19.     
     
  •   ) 
  • } 

    • 本文轉(zhuǎn)載自微信公眾號(hào)「前端人」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端人公眾號(hào)。

     


    網(wǎng)站名稱：React你應(yīng)該學(xué)會(huì)的開發(fā)技巧
    URL分享：http://www.5511xx.com/article/cdpppjs.html

    其他資訊