【譯】React代碼整潔之道

作者： ViktorHub 2021-03-07 09:19:31

開發前端

整潔的代碼不僅僅是正常運行的代碼，更是要求易于閱讀、簡單易懂、組織整齊。在本文中，我們將研究八種代碼整潔之道。

[[385736]]

整潔的代碼不僅僅是正常運行的代碼，更是要求易于閱讀、簡單易懂、組織整齊。

在本文中，我們將研究八種代碼整潔之道。

在閱讀這些建議時，要記住這些只是建議!如果你不同意它們中的任何一個，那也完全沒關系。

以下這些實踐，個人覺得對我自己編寫 React 代碼很有幫助。

讓我們開始吧!

1. 僅對一個條件進行渲染

如果需要在條件為 true 時渲染某些內容，而在條件為 false 時不渲染任何內容，不要使三元表達式，請改用 &&。

🙅‍♂️ 不推薦示例：

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>條件為 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>條件為 True!</p>} 
    </div> 
  ) 
}

2. 每一個條件都進行渲染

如果需要在條件為 true 時渲染某些內容，而在條件為 false 時渲染其他內容。使用三元表達式!

🙅‍♂️ 不推薦的示例：

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> 
      {/* 條件 True 和 False 都要渲染內容 */} 
      {showConditionOneText && <p>條件為 True!</p>} 
      {!showConditionOneText && <p>條件為 Flase!</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> 
  ) 
}

3. Boolean props

Props 值為 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> 
    {/* 不需要賦值 true，省略 */} 
    <HungryMessage isHungry /> 
    <br /> 
    <span> 
      <b>This person is full: </b> 
    </span> 
    <HungryMessage isHungry={false} /> 
  </div> 
)

4. String props

Props 值為 String, 使用雙引號，不使用花括號或反引號。

🙅‍♂️ 不推薦示例：

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

5. Event handler functions

如果一個事件函數只接受一個參數，不需要傳入匿名函數：onChange={e=>handleChange(e)}，推薦這種寫法：onChange={handleChange} 。

🙅‍♂️ 不推薦示例：

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

6. components as props

將組件作為參數傳遞給另一個組件時，如果該組件不接受任何參數，則無需將該傳遞的組件包裝在函數中。

🙅‍♂️ 不推薦示例：

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

7. undefined props

如果參數為 undefined 是允許的，那么不要提供 undefined 作為回退值。

🙅‍♂️ 不推薦示例：

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

8. 設置 state 依賴先前的 state

如果新 state 依賴于先前 state，則始終將 state 設置為先前 state 的函數。可以批處理 React 狀態更新。

🙅‍♂️ 不推薦示例：

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

以上就是我推薦的幾個寫出整潔的 React 代碼的實踐。

最后，恭喜你讀完了本文，歡迎留言交流~

原文地址：https://dev.to/thawkin3/react-clean-code-simple-ways-to-write-better-and-cleaner-code-2loa

翻譯/潤色：ViktorHub

責任編輯：姜華來源：前端思維框架

React 代碼整潔代碼的實踐