React你应该学会的开发技巧

干净的代码不仅仅是工作代码。简洁的代码易于阅读，易于理解并且井井有条。在本文中，我们将研究六种编写更简洁的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 && 
成立显示内容!
} 
    
 
  ) 
}

2.Boolean Props简写

isHungry处简写了

不推荐写法：

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

3.String Props简写

personName处简写了

不推荐写法：

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

推荐写法：

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

4.事件处理函数简写

onChange处简写了

不推荐写法：

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

5.组件作为参数返回

IconComponent处简写了

不推荐写法：

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

推荐写法：

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

6.设置依赖于先前pros的pros

如果新状态依赖于先前状态，则始终将状态设置为先前状态的函数。可以批处理React状态更新，并且不以这种方式编写更新会导致意外结果,setIsDisabled处简写

不推荐写法：

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