[[385445]]

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

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

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

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

不推薦寫法：

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

推薦寫法：

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

2.Boolean Props簡(jiǎn)寫

isHungry處簡(jiǎn)寫了

不推薦寫法：

import React from 'react' 
const HungryMessage = ({ isHungry }) => ( 
  <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 
) 
 
export const BooleanPropBad = () => ( 
  <div> 
    <HungryMessage isHungry={true} /> 
    <HungryMessage isHungry={false} /> 
  </div> 
) 

推薦寫法：

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

3.String Props簡(jiǎn)寫

personName處簡(jiǎn)寫了

不推薦寫法：

import React from 'react' 
const Greeting = ({ personName }) => <p>Hi, {personName}!</p> 
 
export const StringPropValuesBad = () => ( 
  <div> 
    <Greeting personName={"John"} /> 
    <Greeting personName={'Matt'} /> 
    <Greeting personName={`Paul`} /> 
  </div> 
) 

推薦寫法：

import React from 'react' 
const Greeting = ({ personName }) => <p>Hi, {personName}!</p> 
 
export const StringPropValuesGood = () => ( 
  <div> 
    <Greeting personName="John" /> 
    <Greeting personName="Matt" /> 
    <Greeting personName="Paul" /> 
  </div> 
) 

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

onChange處簡(jiǎn)寫了

不推薦寫法：

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

推薦寫法：

import React, { useState } from 'react' 
export const UnnecessaryAnonymousFunctionsGood = () => { 
  const [inputValue, setInputValue] = useState('') 
  const handleChange = e => { 
    setInputValue(e.target.value) 
  } 
 
  return ( 
    <> 
      <label htmlFor="name">Name: </label> 
      <input id="name" value={inputValue} onChange={handleChange} /> 
    </> 
  ) 
} 

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

IconComponent處簡(jiǎn)寫了

不推薦寫法：

import React from 'react' 
const CircleIcon = () => ( 
  <svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
  </svg> 
) 
 
const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( 
  <div> 
    <IconComponent /> 
  </div> 
) 
 
export const UnnecessaryAnonymousFunctionComponentsBad = () => ( 
  <ComponentThatAcceptsAnIcon IconComponent={() => <CircleIcon />} /> 
) 

推薦寫法：

import React from 'react' 
const CircleIcon = () => ( 
  <svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
  </svg> 
) 
 
const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( 
  <div> 
    <IconComponent /> 
  </div> 
) 
 
export const UnnecessaryAnonymousFunctionComponentsGood = () => ( 
  <ComponentThatAcceptsAnIcon IconComponent={CircleIcon} /> 
) 

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

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

不推薦寫法：

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 ( 
    <div> 
      <button disabled={isDisabled}> 
        I'm {isDisabled ? 'disabled' : 'enabled'} 
      </button> 
      <button onClick={toggleButton}>切換按鈕狀態(tài)</button> 
      <button onClick={toggleButton2Times}>切換按鈕狀態(tài)2次</button> 
    </div> 
  ) 
} 

推薦寫法：

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 ( 
    <div> 
      <button disabled={isDisabled}> 
        I'm {isDisabled ? 'disabled' : 'enabled'} 
      </button> 
      <button onClick={toggleButton}>切換按鈕狀態(tài)</button> 
      <button onClick={toggleButton2Times}>切換按鈕狀態(tài)2次</button> 
    </div> 
  ) 
} 

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