Cleancode不仅仅是能正常工作的代码。还要求它易于阅读、简单易懂和组织整齐。在本文中，我们将研究八种保持代码整洁的方法。阅读这些建议时，请记住这些只是建议！如果您不同意其中任何一个，那完全没问题。下面的实践，个人觉得对我自己写React代码很有帮助。让我们开始吧！1.只为一个条件渲染如果你需要在条件为真时渲染一些东西，而在条件为假时什么都不渲染，不要使用三元表达式，而是使用&&。🙅?♂?不推荐示例：importReact,{useState}from'react'exportconstConditionalRenderingWhenTrueBad=()=>{const[showConditionalText,setShowConditionalText]=useState(false)constandleClick=()=>setShowConditionalText(showConditionalText=>!showConditionalText)return(
Togglethetext{/*三元表达式*/}{showConditionalText?条件为真！
:null )}👍推荐示例：importReact,{useState}from'react'exportconstConditionalRenderingWhenTrueGood=()=>{const[showConditionalText,setShowConditionalText]=useState(false)consthandleClick=()=>setShowConditionalText(showConditionalText=>!showConditionalText)return(
Togglethetext{showConditionalText&&条件为True!
} )}2.每个条件如果条件为真则渲染一些内容当条件为真时渲染一些内容false，当条件为false时渲染其他内容。使用三元表达式！🙅?♂?弃用示例：importReact,{useState}from'react'exportconstConditionalRenderingBad=()=>{const[showConditionOneText,setShowConditionOneText]=useState(false)constandleClick=()=>setShowConditionOneText(showConditionOneText=>!showConditionOneText)return(
Togglethetext{/*条件True和False都呈现内容*/}{showConditionOneText&&条件为真！
}{!showConditionOneText&&条件为假！
} )}👍推荐示例：importReact,{useState}from'react'exportconstConditionalRenderingGood=()=>{const[showConditionOneText,setShowConditionOneText]=useState(false)constandleClick=()=>setShowConditionOneText(showConditionOneText=>!showConditionOneText)return(
Togglethetext{showConditionOneText?(条件必须为真！
):(条件必须为假！)}3.如果Booleanprops为真，建议省略省略掉🙅?♂?不推荐例子：importReactfrom'react'constHungryMessage=({isHungry})=>({isHungry?'Iamhungry':'Iamfull'})exportconstBooleanPropBad=()=>(
Thispersonishungry:
Thispersonisfull:
)👍推荐示例：importReactfrom'react'constHungryMessage=({isHungry})=>({isHungry?'Iamhungry':'Iamfull'})exportconstBooleanPropGood=()=>(Thispersonishungry:{/*无需赋值true，省略*/>
Thispersonisfull:HungryMessageisHungry={false}/>
)4.StringpropsProps值为String，使用双引号，不要使用花括号或反引号。🙅?♂?弃用示例：importReactfrom'react'constGreeting=({personName})=>嗨，{personName}！
exportconstStringPropValuesBad=()=>(
)👍推荐示例：importReactfrom'react'constGreeting=({personName})=>嗨，{personName}！
exportconstStringPropValuesGood=()=>(
)5.事件处理函数如果一个事件函数只接受一个参数，则不需要传入匿名函数：onChange={e=>handleChange(e)}，推荐这种写法：onChange={handleChange}。🙅?♂?不推荐示例：importReact,{useState}from'react'exportconstUnnecessaryAnonymousFunctionsBad=()=>{const[inputValue,setInputValue]=useState('')constandleChange=e=>{setInputValue(e.target.value)}return(<>Name:{/*事件只有一个参数，不需要匿名函数*/>handleChange(e)}/>)}👍推荐示例：importReact,{useState}from'react'exportconstUnnecessaryAnonymousFunctionsGood=()=>{const[inputValue,setInputValue]=useState('')constandleChange=e=>{setInputValue(e.target.value)}return(<>Name:)}6.componentsasprops将一个组件作为参数传递给另一个时组件，如果组件不接受任何参数，则不需要将传递的组件包装在函数中。🙅?♂?弃用示例：importReactfrom'react'constCircleIcon=()=>()constComponentThatAcceptsAnIcon=({IconComponent})=>(BelowistheiconcomponentpropIwasgiven:
/div>)exportconstUnnecessaryAnonymousFunctionComponentsBad=()=>({/*组件不需要包裹在函数中*/>}/>)👍推荐示例：importReactfrom'react'constCircleIcon=()=>()constComponentThatAcceptsAnIcon=({IconComponent})=>(BelowistheiconcomponentpropIwasgiven:
alert('点击了！')}/>alert('点击了！')}/>
)👍推荐示例：importReactfrom'react'constButtonOne=({handleClick})=>(Clickme)exportconstUndefinedPropsGood=()=>(alert('Clicked!')}/>
)8.根据先前状态设置状态如果新状态依赖于先前状态，则始终将状态设置为先前状态的函数。React状态更新可以批处理。🙅?♂?不推荐示例：importReact,{useState}from'react'exportconstPreviousStateBad=()=>{const[isDisabled,setIsDisabled]=useState(false)consttoggleButton=()=>setIsDisabled(!isDisabled)consttoggleButton2Times=()=>{for(leti=0;i<2;i++){toggleButton()}}return(我{isDisabled?'disabled':'enabled'}TogglebuttonstateTogglebuttonstate2times
)}👍推荐示例：importReact,{useState}from'react'exportconstPreviousStateGood=()=>{const[isDisabled,setIsDisabled]=useState(false){/*推荐设置为函数*/}consttoggleButton=()=>setIsDisabled(isDisabled=>!isDisabled)consttoggleButton2Times=()=>{for(leti=0;i<2;i++){toggleButton()}}return(我{isDisabled?'disabled':'enabled'}切换glebuttonstateTogglebuttonstate2times
)}以上是我推荐的写出整洁React代码的一些做法最后，恭喜阅读本文，欢迎留言~原文地址：https://dev.to/thawkin3/react-clean-code-simple-ways-to-write-better-and-cleaner-code-2loa翻译/润色：ViktorHub
