自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

【譯】React代碼整潔之道

作者： ViktorHub
開發(fā) 前端
整潔的代碼不僅僅是正常運(yùn)行的代碼，更是要求易于閱讀、簡(jiǎn)單易懂、組織整齊。在本文中，我們將研究八種代碼整潔之道。

[[385736]]

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

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

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

以下這些實(shí)踐，個(gè)人覺得對(duì)我自己編寫 React 代碼很有幫助。

讓我們開始吧!

1. 僅對(duì)一個(gè)條件進(jìn)行渲染

如果需要在條件為 true 時(shí)渲染某些內(nèi)容，而在條件為 false 時(shí)不渲染任何內(nèi)容，不要使 三元表達(dá)式，請(qǐng)改用 &&。

🙅‍♂️ 不推薦示例：

  1. import React, { useState } from 'react' 
  2.  
  3. export const ConditionalRenderingWhenTrueBad = () => { 
  4.   const [showConditionalText, setShowConditionalText] = useState(false) 
  5.  
  6.   const handleClick = () => 
  7.     setShowConditionalText(showConditionalText => !showConditionalText) 
  8.  
  9.   return ( 
  10.     <div> 
  11.       <button onClick={handleClick}>Toggle the text</button> 
  12.       {/* 三元表達(dá)式 */} 
  13.       {showConditionalText ? <p>條件為 True!</p> : null}  
  14.     </div> 
  15.   ) 
  16. } 

 👍 推薦示例：

  1. import React, { useState } from 'react' 
  2.  
  3. export const ConditionalRenderingWhenTrueGood = () => { 
  4.   const [showConditionalText, setShowConditionalText] = useState(false) 
  5.  
  6.   const handleClick = () => 
  7.     setShowConditionalText(showConditionalText => !showConditionalText) 
  8.  
  9.   return ( 
  10.     <div> 
  11.       <button onClick={handleClick}>Toggle the text</button> 
  12.       {showConditionalText && <p>條件為 True!</p>} 
  13.     </div> 
  14.   ) 
  15. } 

 2. 每一個(gè)條件都進(jìn)行渲染

如果需要在條件為 true 時(shí)渲染某些內(nèi)容，而在條件為 false 時(shí)渲染其他內(nèi)容。使用三元表達(dá)式!

🙅‍♂️ 不推薦的示例：

  1. import React, { useState } from 'react' 
  2.  
  3. export const ConditionalRenderingBad = () => { 
  4.   const [showConditionOneText, setShowConditionOneText] = useState(false) 
  5.  
  6.   const handleClick = () => 
  7.     setShowConditionOneText(showConditionOneText => !showConditionOneText) 
  8.  
  9.   return ( 
  10.     <div> 
  11.       <button onClick={handleClick}>Toggle the text</button> 
  12.       {/* 條件 True 和 False 都要渲染內(nèi)容 */} 
  13.       {showConditionOneText && <p>條件為 True!</p>} 
  14.       {!showConditionOneText && <p>條件為 Flase!</p>} 
  15.     </div> 
  16.   ) 
  17. } 

 👍 推薦示例：

  1. import React, { useState } from 'react' 
  2.  
  3. export const ConditionalRenderingGood = () => { 
  4.   const [showConditionOneText, setShowConditionOneText] = useState(false) 
  5.  
  6.   const handleClick = () => 
  7.     setShowConditionOneText(showConditionOneText => !showConditionOneText) 
  8.  
  9.   return ( 
  10.     <div> 
  11.       <button onClick={handleClick}>Toggle the text</button> 
  12.       {showConditionOneText ? ( 
  13.         <p>The condition must be true!</p> 
  14.       ) : ( 
  15.         <p>The condition must be false!</p> 
  16.       )} 
  17.     </div> 
  18.   ) 
  19. } 

 3. Boolean props

Props 值為 true 的推薦省略不寫。

🙅‍♂️ 不推薦示例：

  1. import React from 'react' 
  2.  
  3. const HungryMessage = ({ isHungry }) => ( 
  4.   <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 
  5. ) 
  6.  
  7. export const BooleanPropBad = () => ( 
  8.   <div> 
  9.     <span> 
  10.       <b>This person is hungry: </b> 
  11.     </span> 
  12.     <HungryMessage isHungry={true} /> 
  13.     <br /> 
  14.     <span> 
  15.       <b>This person is full: </b> 
  16.     </span> 
  17.     <HungryMessage isHungry={false} /> 
  18.   </div> 
  19. ) 

 👍 推薦示例：

  1. import React from 'react' 
  2.  
  3. const HungryMessage = ({ isHungry }) => ( 
  4.   <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 
  5. ) 
  6.  
  7. export const BooleanPropGood = () => ( 
  8.   <div> 
  9.     <span> 
  10.       <b>This person is hungry: </b> 
  11.     </span> 
  12.     {/* 不需要賦值 true，省略 */} 
  13.     <HungryMessage isHungry /> 
  14.     <br /> 
  15.     <span> 
  16.       <b>This person is full: </b> 
  17.     </span> 
  18.     <HungryMessage isHungry={false} /> 
  19.   </div> 
  20. ) 

 4. String props

Props 值為 String, 使用雙引號(hào)，不使用花括號(hào)或反引號(hào)。

🙅‍♂️ 不推薦示例：

  1. import React from 'react' 
  2.  
  3. const Greeting = ({ personName }) => <p>Hi, {personName}!</p> 
  4.  
  5. export const StringPropValuesBad = () => ( 
  6.   <div> 
  7.     <Greeting personName={"John"} /> 
  8.     <Greeting personName={'Matt'} /> 
  9.     <Greeting personName={`Paul`} /> 
  10.   </div> 
  11. ) 

 👍 推薦示例：

  1. import React from 'react' 
  2.  
  3. const Greeting = ({ personName }) => <p>Hi, {personName}!</p> 
  4.  
  5. export const StringPropValuesGood = () => ( 
  6.   <div> 
  7.     <Greeting personName="John" /> 
  8.     <Greeting personName="Matt" /> 
  9.     <Greeting personName="Paul" /> 
  10.   </div> 
  11. ) 

 5. Event handler functions

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

🙅‍♂️ 不推薦示例：

  1. import React, { useState } from 'react' 
  2.  
  3. export const UnnecessaryAnonymousFunctionsBad = () => { 
  4.   const [inputValue, setInputValue] = useState('') 
  5.  
  6.   const handleChange = e => { 
  7.     setInputValue(e.target.value) 
  8.   } 
  9.  
  10.   return ( 
  11.     <> 
  12.       <label htmlFor="name">Name: </label> 
  13.       {/* 事件只有一個(gè)參數(shù)，不需要匿名函數(shù)*/} 
  14.       <input id="name" value={inputValue} onChange={e => handleChange(e)} /> 
  15.     </> 
  16.   ) 
  17. } 

👍 推薦示例：

  1. import React, { useState } from 'react' 
  2.  
  3. export const UnnecessaryAnonymousFunctionsGood = () => { 
  4.   const [inputValue, setInputValue] = useState('') 
  5.  
  6.   const handleChange = e => { 
  7.     setInputValue(e.target.value) 
  8.   } 
  9.  
  10.   return ( 
  11.     <> 
  12.       <label htmlFor="name">Name: </label> 
  13.       <input id="name" value={inputValue} onChange={handleChange} /> 
  14.     </> 
  15.   ) 
  16. } 

6. components as props

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

🙅‍♂️ 不推薦示例：

  1. import React from 'react' 
  2.  
  3. const CircleIcon = () => ( 
  4.   <svg height="100" width="100"> 
  5.     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
  6.   </svg> 
  7. ) 
  8.  
  9. const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( 
  10.   <div> 
  11.     <p>Below is the icon component prop I was given:</p> 
  12.     <IconComponent /> 
  13.   </div> 
  14. ) 
  15.  
  16. export const UnnecessaryAnonymousFunctionComponentsBad = () => ( 
  17.   {/* 組件不需要包裝在函數(shù)中 */} 
  18.   <ComponentThatAcceptsAnIcon IconComponent={() => <CircleIcon />} /> 
  19. ) 

 👍 推薦示例：

  1. import React from 'react' 
  2.  
  3. const CircleIcon = () => ( 
  4.   <svg height="100" width="100"> 
  5.     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
  6.   </svg> 
  7. ) 
  8.  
  9. const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( 
  10.   <div> 
  11.     <p>Below is the icon component prop I was given:</p> 
  12.     <IconComponent /> 
  13.   </div> 
  14. ) 
  15.  
  16. export const UnnecessaryAnonymousFunctionComponentsGood = () => ( 
  17.   <ComponentThatAcceptsAnIcon IconComponent={CircleIcon} /> 
  18. ) 

 7. undefined props

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

🙅‍♂️ 不推薦示例：

  1. import React from 'react' 
  2.  
  3. const ButtonOne = ({ handleClick }) => ( 
  4.   <button onClick={handleClick || undefined}>Click me</button> 
  5. ) 
  6.  
  7. const ButtonTwo = ({ handleClick }) => { 
  8.   const noop = () => {} 
  9.  
  10.   return <button onClick={handleClick || noop}>Click me</button> 
  11. } 
  12.  
  13. export const UndefinedPropsBad = () => ( 
  14.   <div> 
  15.     <ButtonOne /> 
  16.     <ButtonOne handleClick={() => alert('Clicked!')} /> 
  17.     <ButtonTwo /> 
  18.     <ButtonTwo handleClick={() => alert('Clicked!')} /> 
  19.   </div> 
  20. ) 

 👍 推薦示例：

  1. import React from 'react' 
  2.  
  3. const ButtonOne = ({ handleClick }) => ( 
  4.   <button onClick={handleClick}>Click me</button> 
  5. ) 
  6.  
  7. export const UndefinedPropsGood = () => ( 
  8.   <div> 
  9.     <ButtonOne /> 
  10.     <ButtonOne handleClick={() => alert('Clicked!')} /> 
  11.   </div> 
  12. ) 

 8. 設(shè)置 state 依賴先前的 state

如果新 state 依賴于先前 state，則始終將 state 設(shè)置為先前 state 的函數(shù)?？梢耘幚?React 狀態(tài)更新。

🙅‍♂️ 不推薦示例：

  1. import React, { useState } from 'react' 
  2.  
  3. export const PreviousStateBad = () => { 
  4.   const [isDisabled, setIsDisabled] = useState(false) 
  5.  
  6.   const toggleButton = () => setIsDisabled(!isDisabled) 
  7.  
  8.   const toggleButton2Times = () => { 
  9.     for (let i = 0; i < 2; i++) { 
  10.       toggleButton() 
  11.     } 
  12.   } 
  13.  
  14.   return ( 
  15.     <div> 
  16.       <button disabled={isDisabled}> 
  17.         I'm {isDisabled ? 'disabled' : 'enabled'} 
  18.       </button> 
  19.       <button onClick={toggleButton}>Toggle button state</button> 
  20.       <button onClick={toggleButton2Times}>Toggle button state 2 times</button> 
  21.     </div> 
  22.   ) 
  23. } 

 👍 推薦示例：

  1. import React, { useState } from 'react' 
  2.  
  3. export const PreviousStateGood = () => { 
  4.   const [isDisabled, setIsDisabled] = useState(false) 
  5.  
  6.   {/* 推薦設(shè)置為函數(shù) */} 
  7.   const toggleButton = () => setIsDisabled(isDisabled => !isDisabled) 
  8.  
  9.   const toggleButton2Times = () => { 
  10.     for (let i = 0; i < 2; i++) { 
  11.       toggleButton() 
  12.     } 
  13.   } 
  14.  
  15.   return ( 
  16.     <div> 
  17.       <button disabled={isDisabled}> 
  18.         I'm {isDisabled ? 'disabled' : 'enabled'} 
  19.       </button> 
  20.       <button onClick={toggleButton}>Toggle button state</button> 
  21.       <button onClick={toggleButton2Times}>Toggle button state 2 times</button> 
  22.     </div> 
  23.   ) 
  24. } 

 以上就是我推薦的幾個(gè)寫出整潔的 React 代碼的實(shí)踐。

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

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

翻譯/潤(rùn)色：ViktorHub

 

責(zé)任編輯：姜華 來源： 前端思維框架
React代碼整潔代碼的實(shí)踐
相關(guān)推薦

2012-08-01 09:38:17

代碼整潔

2012-08-01 09:23:31

代碼

2021-01-06 14:42:09

前端Typescript代碼

2020-12-09 10:49:33

代碼開發(fā)GitHub

2020-02-29 16:00:20

代碼開發(fā)程序員

2012-09-25 09:28:36

程序員代碼代碼整潔

2011-12-02 10:19:24

CSS

2019-05-14 09:31:16

架構(gòu)整潔軟件編程范式

2021-03-19 07:23:23

Go架構(gòu)Go工程化

2011-06-03 15:06:30

CSS

2011-06-03 15:21:51

CSS

2022-08-31 12:15:09

JavaScript代碼優(yōu)化

2015-06-17 14:24:48

優(yōu)秀程序員整潔代碼

2025-01-14 00:01:01

2020-03-28 14:57:29

JavaScrip代碼函數(shù)

2014-12-26 10:06:48

Docker容器代碼部署

2010-09-09 13:59:55

CSS

2017-10-24 15:28:27

PHP代碼簡(jiǎn)潔SOLID原則

2018-07-23 08:19:26

編程語言Python工具

2014-03-18 16:12:00

代碼整潔編寫代碼
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)