编写简洁的React代码建议

前言

干净的代码易于阅读，简单易懂，而且组织整齐。在这篇文章中，列举了一些平时可能需要关注的点。

成都创新互联公司网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、响应式网站、行业门户型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，成都创新互联公司网站制作为客户规划、定制制作符合企业需求、带有营销价值的网络建站方案认真对待每一个客户，我们不用口头的语言来吹擂我们的优秀，上1000+的成功案例见证着我们的成长。

如果你不同意其中任何一条，那也完全没问题。

只对一个条件进行条件性渲染

如果你需要在一个条件为真时有条件地呈现一些东西，在一个条件为假时不呈现任何东西，不要使用三元运算符。使用&&运算符代替。

糟糕的例子:

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

如果你需要在一个条件为真时有条件地呈现一个东西，在条件为假时呈现另一个东西，请使用三元运算符。

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

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:
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 = () => (
)

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

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

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

编写简洁的React代码建议

前言

只对一个条件进行条件性渲染

糟糕的例子:

好的例子:

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

糟糕的例子:

好的例子:

Boolean props

糟糕的例子:

好的例子:

String props

糟糕的例子:

好的例子:

事件处理函数

糟糕的例子:

好的例子:

将组件作为props传递

糟糕的例子:

好的例子:

为定义的props

糟糕的例子:

好的例子:

设置依赖前一个状态的状态

糟糕的例子:

好的例子:

总结