React你應(yīng)該學(xué)會的開發(fā)技巧【總結(jié)】！

干凈的代碼不僅僅是工作代碼。簡潔的代碼易于閱讀，易于理解并且井井有條。在本文中，我們將研究六種編寫更簡潔的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 (
    <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簡寫

isHungry處簡寫了

不推薦寫法：

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

personName處簡寫了

不推薦寫法：

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ù)簡寫

onChange處簡寫了

不推薦寫法：

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

不推薦寫法：

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ài)依賴于先前狀態(tài)，則始終將狀態(tài)設(shè)置為先前狀態(tài)的函數(shù)?？梢耘幚鞷eact狀態(tài)更新，并且不以這種方式編寫更新會導(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 (
    <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>
  )
}

接下來你該做的