React你应该学会的开发技巧

[[385445]]

创新互联专注为客户提供全方位的互联网综合服务，包含不限于做网站、成都网站建设、宜良网络推广、成都微信小程序、宜良网络营销、宜良企业策划、宜良品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供宜良建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

干净的代码不仅仅是工作代码。简洁的代码易于阅读，易于理解并且井井有条。在本文中，我们将研究六种编写更简洁的React代码的方法。

在阅读这些建议时，请务必记住它们的实质：相信这些实践对我们编写自己的React代码很有帮助。让我们一起学习吧!

1.仅针对一种条件渲染

如果你要为某个条件成立时渲染某些元素，请不要使用三元运算符。请改用&&运算符。

不推荐写法：

 
 
 
 
  
  
  
  import React, { useState } from 'react'   
  
  
  export const ConditionalRenderingWhenTrueBad = () => {   
  
  
    const [showConditionalText, setShowConditionalText] = useState(false)   
  
  
    const handleClick = () =>   
  
  
      setShowConditionalText(showConditionalText => !showConditionalText)   
  
  
         
  
  
    return (   
  
  
         
  
  
        切换文本   
  
  
        {showConditionalText ? 成立显示内容
 : null}

)

}

推荐写法：

 
 
 
 
  
  
  
  import React, { useState } from 'react'   
  
  
  export const ConditionalRenderingWhenTrueGood = () => {   
  
  
    const [showConditionalText, setShowConditionalText] = useState(false)   
  
  
     
  
  
    const handleClick = () =>   
  
  
      setShowConditionalText(showConditionalText => !showConditionalText)   
  
  
     
  
  
    return (   
  
  
         
  
  
        切换文本   
  
  
        {showConditionalText && 成立显示内容!
}

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

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

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 }) => (
)
export const UnnecessaryAnonymousFunctionComponentsBad = () => (
} />
)

import React from 'react'
const CircleIcon = () => (
)
const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (
)
export const UnnecessaryAnonymousFunctionComponentsGood = () => (
)

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'}
切换按钮状态
切换按钮状态2次
)
}

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'}
切换按钮状态
切换按钮状态2次
)
}