【译】React代码整洁之道

整洁的代码不仅仅是正常运行的代码，更是要求易于阅读、简单易懂、组织整齐。

在本文中，我们将研究八种代码整洁之道。

在阅读这些建议时，要记住这些只是建议!如果你不同意它们中的任何一个，那也完全没关系。

以下这些实践，个人觉得对我自己编写 React 代码很有帮助。

让我们开始吧!

1. 仅对一个条件进行渲染

如果需要在条件为 true 时渲染某些内容，而在条件为 false 时不渲染任何内容，不要使三元表达式，请改用 &&。

‍️ 不推荐示例：

 
 
 
   
  
  
  import React, { useState } from 'react'   
  
  
     
  
  
  export const ConditionalRenderingWhenTrueBad = () => {   
  
  
    const [showConditionalText, setShowConditionalText] = useState(false)   
  
  
     
  
  
    const handleClick = () =>   
  
  
      setShowConditionalText(showConditionalText => !showConditionalText)   
  
  
     
  
  
    return (   
  
  
         
  
  
        Toggle the text   
  
  
        {/* 三元表达式 */}   
  
  
        {showConditionalText ? 条件为 True!
 : null}

)

}

推荐示例：

 
 
 
   
  
  
  import React, { useState } from 'react'   
  
  
     
  
  
  export const ConditionalRenderingWhenTrueGood = () => {   
  
  
    const [showConditionalText, setShowConditionalText] = useState(false)   
  
  
     
  
  
    const handleClick = () =>   
  
  
      setShowConditionalText(showConditionalText => !showConditionalText)   
  
  
     
  
  
    return (   
  
  
         
  
  
        Toggle the text   
  
  
        {showConditionalText && 条件为 True!
}

)

}

2. 每一个条件都进行渲染

如果需要在条件为 true 时渲染某些内容，而在条件为 false 时渲染其他内容。使用三元表达式!

‍️ 不推荐的示例：

 
 
 
   
  
  
  import React, { useState } from 'react'   
  
  
     
  
  
  export const ConditionalRenderingBad = () => {   
  
  
    const [showConditionOneText, setShowConditionOneText] = useState(false)   
  
  
     
  
  
    const handleClick = () =>   
  
  
      setShowConditionOneText(showConditionOneText => !showConditionOneText)   
  
  
     
  
  
    return (   
  
  
         
  
  
        Toggle the text   
  
  
        {/* 条件 True 和 False 都要渲染内容 */}   
  
  
        {showConditionOneText && 条件为 True!
}   
  
  
        {!showConditionOneText && 条件为 Flase!
}

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

import React from 'react'
const HungryMessage = ({ isHungry }) => (
{isHungry ? 'I am hungry' : 'I am full'}
)
export const BooleanPropBad = () => (
This person is hungry:
This person is full:
)

import React from 'react'
const HungryMessage = ({ isHungry }) => (
{isHungry ? 'I am hungry' : 'I am full'}
)
export const BooleanPropGood = () => (
This person is hungry:
{/* 不需要赋值 true，省略 */}
This person is full:
)

import React from 'react'
const Greeting = ({ personName }) =>
Hi, {personName}!
export const StringPropValuesBad = () => (
)

import React from 'react'
const Greeting = ({ personName }) =>
Hi, {personName}!
export const StringPropValuesGood = () => (
)

如果一个事件函数只接受一个参数，不需要传入匿名函数：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 (
<>
Name:
{/* 事件只有一个参数，不需要匿名函数*/}
handleChange(e)} />
)
}

import React, { useState } from 'react'
export const UnnecessaryAnonymousFunctionsGood = () => {
const [inputValue, setInputValue] = useState('')
const handleChange = e => {
setInputValue(e.target.value)
}
return (
<>
Name:
)
}

将组件作为参数传递给另一个组件时，如果该组件不接受任何参数，则无需将该传递的组件包装在函数中。

import React from 'react'
const CircleIcon = () => (
)
const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (
Below is the icon component prop I was given:
)
export const UnnecessaryAnonymousFunctionComponentsBad = () => (
{/* 组件不需要包装在函数中 */}
} />
)

import React from 'react'
const CircleIcon = () => (
)
const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (
Below is the icon component prop I was given:
)
export const UnnecessaryAnonymousFunctionComponentsGood = () => (
)

如果参数为 undefined 是允许的，那么不要提供 undefined 作为回退值。

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

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

如果新 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 (
I'm {isDisabled ? 'disabled' : 'enabled'}
Toggle button state
Toggle button state 2 times
)
}

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 (
I'm {isDisabled ? 'disabled' : 'enabled'}
Toggle button state
Toggle button state 2 times
)
}

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

网站建设知识

【译】React代码整洁之道

其他资讯