這篇文章給大家介紹如何編寫簡潔的React代碼，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都地區(qū)優(yōu)秀IDC服務器托管提供商(成都創(chuàng)新互聯(lián)公司).為客戶提供專業(yè)的服務器托管,四川各地服務器托管,服務器托管、多線服務器托管.托管咨詢專線：18982081108

只對一個條件進行條件性渲染

如果你需要在一個條件為真時有條件地呈現(xiàn)一些東西，在一個條件為假時不呈現(xiàn)任何東西，不要使用三元運算符。使用&&運算符代替。

糟糕的例子:

import React, { useState } from 'react'  export const ConditionalRenderingWhenTrueBad = () => {   const [showConditionalText, setShowConditionalText] = useState(false)    const handleClick = () =>     setShowConditionalText(showConditionalText => !showConditionalText)    return (     
       Toggle the text       {showConditionalText ? 
The condition must be true!
 : null}     
   ) }

 好的例子:

import React, { useState } from 'react'  export const ConditionalRenderingWhenTrueGood = () => {   const [showConditionalText, setShowConditionalText] = useState(false)    const handleClick = () =>     setShowConditionalText(showConditionalText => !showConditionalText)    return (     
       Toggle the text       {showConditionalText && 
The condition must be true!
}     
   ) }

 有條件的渲染是指在任何條件下

如果你需要在一個條件為真時有條件地呈現(xiàn)一個東西，在條件為假時呈現(xiàn)另一個東西，請使用三元運算符。

糟糕的例子:

import React, { useState } from 'react'  export const ConditionalRenderingBad = () => {   const [showConditionOneText, setShowConditionOneText] = useState(false)    const handleClick = () =>     setShowConditionOneText(showConditionOneText => !showConditionOneText)    return (     
       Toggle the text       {showConditionOneText && 
The condition must be true!
}       {!showConditionOneText && 
The condition must be false!
}     
   ) }

 好的例子:

import React, { useState } from 'react'  export const ConditionalRenderingGood = () => {   const [showConditionOneText, setShowConditionOneText] = useState(false)    const handleClick = () =>     setShowConditionOneText(showConditionOneText => !showConditionOneText)    return (     
       Toggle the text       {showConditionOneText ? (         
The condition must be true!
       ) : (         
The condition must be false!
       )}     
   ) }

 Boolean props

一個真實的props可以提供給一個組件，只有props名稱而沒有值，比如：myTruthyProp。寫成myTruthyProp={true}是不必要的。

糟糕的例子:

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

 好的例子:

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

 String props

可以用雙引號提供一個字符串道具值，而不使用大括號或反斜線。

糟糕的例子:

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

 好的例子:

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

 事件處理函數(shù)

如果一個事件處理程序只需要事件對象的一個參數(shù)，你就可以像這樣提供函數(shù)作為事件處理程序：onChange={handleChange}。

你不需要像這樣把函數(shù)包在一個匿名函數(shù)中。

糟糕的例子:

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:                ) }

將組件作為props傳遞

當把一個組件作為props傳遞給另一個組件時，如果該組件不接受任何props，你就不需要把這個傳遞的組件包裹在一個函數(shù)中。

糟糕的例子:

import React from 'react'  const CircleIcon = () => (            )  const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (   
     
Below is the icon component prop I was given:
        
 )  export const UnnecessaryAnonymousFunctionComponentsBad = () => (    } /> )

好的例子:

import React from 'react'  const CircleIcon = () => (            )  const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (   
     
Below is the icon component prop I was given:
        
 )  export const UnnecessaryAnonymousFunctionComponentsGood = () => (    )

為定義的props

未定義的props被排除在外，所以如果props未定義是可以的，就不要擔心提供未定義的回退。

糟糕的例子:

import React from 'react'  const ButtonOne = ({ handleClick }) => (   Click me )  const ButtonTwo = ({ handleClick }) => {   const noop = () => {}    return Click me }  export const UndefinedPropsBad = () => (   
           alert('Clicked!')} />           alert('Clicked!')} />   
 )

 好的例子:

import React from 'react'  const ButtonOne = ({ handleClick }) => (   Click me )  export const UndefinedPropsGood = () => (   
           alert('Clicked!')} />   
 )

 設置依賴前一個狀態(tài)的狀態(tài)

如果新的狀態(tài)依賴于之前的狀態(tài)，那么一定要把狀態(tài)設置為之前狀態(tài)的函數(shù)。React的狀態(tài)更新可以是分批進行的，如果不這樣寫你的更新就會導致意外的結果。

糟糕的例子:

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'}              Toggle button state       Toggle button state 2 times     
   ) }

 好的例子:

import React, { useState } from 'react'  export const PreviousStateGood = () => {   const [isDisabled, setIsDisabled] = useState(false)    const toggleButton = () => setIsDisabled(isDisabled => !isDisabled)    const toggleButton2Times = () => {     for (let i = 0; i < 2; i++) {       toggleButton()     }   }    return (     
                I'm {isDisabled ? 'disabled' : 'enabled'}              Toggle button state       Toggle button state 2 times     
   ) }

 總結

以下做法并非針對React，而是在JavaScript(以及任何編程語言)中編寫干凈代碼的良好做法。

• 將復雜的邏輯提取為明確命名的函數(shù)

• 將神奇的數(shù)字提取為常量

• 使用明確命名的變量

關于如何編寫簡潔的React代碼就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。