編寫簡(jiǎn)潔的React代碼建議

作者：小弋 2021-04-25 11:31:45

開發(fā) 前端

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

[[395577]]

前言

干凈的代碼易于閱讀，簡(jiǎn)單易懂，而且組織整齊。在這篇文章中，列舉了一些平時(shí)可能需要關(guān)注的點(diǎn)。

如果你不同意其中任何一條，那也完全沒(méi)問(wèn)題。

只對(duì)一個(gè)條件進(jìn)行條件性渲染

糟糕的例子:

import React, { useState } from 'react' 
 
export const ConditionalRenderingWhenTrueBad = () => { 
  const [showConditionalText, setShowConditionalText] = useState(false) 
 
  const handleClick = () => 
    setShowConditionalText(showConditionalText => !showConditionalText) 
 
  return ( 
    <div> 
      <button onClick={handleClick}>Toggle the text</button> 
      {showConditionalText ? <p>The condition must be true!</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}>Toggle the text</button> 
      {showConditionalText && <p>The condition must be true!</p>} 
    </div> 
  ) 
}

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

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

糟糕的例子:

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

好的例子:

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

Boolean props

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

糟糕的例子:

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

好的例子:

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

String props

可以用雙引號(hào)提供一個(gè)字符串道具值，而不使用大括號(hào)或反斜線。

糟糕的例子:

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

事件處理函數(shù)

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

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

糟糕的例子:

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

將組件作為props傳遞

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

糟糕的例子:

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> 
    <p>Below is the icon component prop I was given:</p> 
    <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> 
    <p>Below is the icon component prop I was given:</p> 
    <IconComponent /> 
  </div> 
) 
 
export const UnnecessaryAnonymousFunctionComponentsGood = () => ( 
  <ComponentThatAcceptsAnIcon IconComponent={CircleIcon} /> 
)

為定義的props

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

糟糕的例子:

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

好的例子:

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

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

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

糟糕的例子:

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}>Toggle button state</button> 
      <button onClick={toggleButton2Times}>Toggle button state 2 times</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}>Toggle button state</button> 
      <button onClick={toggleButton2Times}>Toggle button state 2 times</button> 
    </div> 
  ) 
}