盗墓笔记,灵域,听中国有声小说

新聞中心

這里有您想知道的互聯(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í)，請務(wù)必記住它們的實(shí)質(zhì)：相信這些實(shí)踐對我們編寫自己的React代碼很有幫助。讓我們一起學(xué)習(xí)吧!

1.僅針對一種條件渲染

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

不推薦寫法：

 
 
 
 
  
  
  
  import React, { useState } from 'react'   
  
  
  export const ConditionalRenderingWhenTrueBad = () => {   
  
  
    const [showConditionalText, setShowConditionalText] = useState(false)   
  
  
    const handleClick = () =>   
  
  
      setShowConditionalText(showConditionalText => !showConditionalText)   
  
  
         
  
  
    return (   
  
  
         
  
  
        切換文本   
  
  
        {showConditionalText ? 成立顯示內(nèi)容
 : null}

)

}

推薦寫法：

 
 
 
 
  
  
  
  import React, { useState } from 'react'   
  
  
  export const ConditionalRenderingWhenTrueGood = () => {   
  
  
    const [showConditionalText, setShowConditionalText] = useState(false)   
  
  
     
  
  
    const handleClick = () =>   
  
  
      setShowConditionalText(showConditionalText => !showConditionalText)   
  
  
     
  
  
    return (   
  
  
         
  
  
        切換文本   
  
  
        {showConditionalText && 成立顯示內(nèi)容!
}

)

}

2.Boolean Props簡寫

isHungry處簡寫了

不推薦寫法：

 
 
 
 
  
  
  
  import React from 'react'   
  
  
  const HungryMessage = ({ isHungry }) => (   
  
  
    {isHungry ? 'I am hungry' : 'I am full'}   
  
  
  )   
  
  
     
  
  
  export const BooleanPropBad = () => (

)

推薦寫法：

 
 
 
 
  
  
  
  import React from 'react'   
  
  
  const HungryMessage = ({ isHungry }) => (   
  
  
    {isHungry ? 'I am hungry' : 'I am full'}   
  
  
  )   
  
  
     
  
  
  export const BooleanPropGood = () => (

)

3.String Props簡寫

personName處簡寫了

不推薦寫法：

 
 
 
 
  
  
  
  import React from 'react'   
  
  
  const Greeting = ({ personName }) => Hi, {personName}!
   
  
  
     
  
  
  export const StringPropValuesBad = () => (

)

推薦寫法：

 
 
 
 
  
  
  
  import React from 'react'   
  
  
  const Greeting = ({ personName }) => Hi, {personName}!
   
  
  
     
  
  
  export const StringPropValuesGood = () => (

)

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

onChange處簡寫了

不推薦寫法：

 
 
 
 
  
  
  
  import React, { useState } from 'react'   
  
  
  export const UnnecessaryAnonymousFunctionsBad = () => {   
  
  
    const [inputValue, setInputValue] = useState('')   
  
  
     
  
  
    const handleChange = e => {   
  
  
      setInputValue(e.target.value)   
  
  
    }   
  
  
     
  
  
    return (   
  
  
      <>   
  
  
        Name:    
  
  
         handleChange(e)} />   
  
  
         
  
  
    )   
  
  
  }

推薦寫法：

 
 
 
 
  
  
  
  import React, { useState } from 'react'   
  
  
  export const UnnecessaryAnonymousFunctionsGood = () => {   
  
  
    const [inputValue, setInputValue] = useState('')   
  
  
    const handleChange = e => {   
  
  
      setInputValue(e.target.value)   
  
  
    }   
  
  
     
  
  
    return (   
  
  
      <>   
  
  
        Name:    
  
  
           
  
  
         
  
  
    )   
  
  
  }

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

IconComponent處簡寫了

不推薦寫法：

 
 
 
 
  
  
  
  import React from 'react'   
  
  
  const CircleIcon = () => (   
  
  
       
  
  
         
  
  
       
  
  
  )   
  
  
     
  
  
  const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (

)

export const UnnecessaryAnonymousFunctionComponentsBad = () => (

} />

)

推薦寫法：

 
 
 
 
  
  
  
  import React from 'react'   
  
  
  const CircleIcon = () => (   
  
  
       
  
  
         
  
  
       
  
  
  )   
  
  
     
  
  
  const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (

)

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處簡寫

不推薦寫法：

 
 
 
 
  
  
  
  import React, { useState } from 'react'   
  
  
  export const PreviousStateBad = () => {   
  
  
    const [isDisabled, setIsDisabled] = useState(false)   
  
  
    const toggleButton = () => setIsDisabled(!isDisabled)   
  
  
     
  
  
    const toggleButton2Times = () => {   
  
  
      for (let i = 0; i < 2; i++) {   
  
  
        toggleButton()   
  
  
      }   
  
  
    }   
  
  
     
  
  
    return (   
  
  
         
  
  
           
  
  
          I'm {isDisabled ? 'disabled' : 'enabled'}   
  
  
           
  
  
        切換按鈕狀態(tài)   
  
  
        切換按鈕狀態(tài)2次

新聞中心

其他資訊