前言
干净的代码易于阅读，简单易懂，而且组织整齐。在这篇文章中，列举了一些平时可能需要关注的点。
如果你不同意其中任何一条，那也完全没问题。
只对一个条件进行条件性渲染
如果你需要在一个条件为真时有条件地呈现一些东西，在一个条件为假时不呈现任何东西，不要使用三元运算符。使用&&运算符代替。
糟糕的例子:
importReact,{useState}from'react' exportconstConditionalRenderingWhenTrueBad=()=>{ const[showConditionalText,setShowConditionalText]=useState(false) consthandleClick=()=> setShowConditionalText(showConditionalText=>!showConditionalText) return( <div> <buttononClick={handleClick}>Togglethetext</button> {showConditionalText?<p>Theconditionmustbetrue!</p>:null} </div> ) } 好的例子:
importReact,{useState}from'react' exportconstConditionalRenderingWhenTrueGood=()=>{ const[showConditionalText,setShowConditionalText]=useState(false) consthandleClick=()=> setShowConditionalText(showConditionalText=>!showConditionalText) return( <div> <buttononClick={handleClick}>Togglethetext</button> {showConditionalText&&<p>Theconditionmustbetrue!</p>} </div> ) } 有条件的渲染是指在任何条件下
如果你需要在一个条件为真时有条件地呈现一个东西，在条件为假时呈现另一个东西，请使用三元运算符。
糟糕的例子:
importReact,{useState}from'react' exportconstConditionalRenderingBad=()=>{ const[showConditionOneText,setShowConditionOneText]=useState(false) consthandleClick=()=> setShowConditionOneText(showConditionOneText=>!showConditionOneText) return( <div> <buttononClick={handleClick}>Togglethetext</button> {showConditionOneText&&<p>Theconditionmustbetrue!</p>} {!showConditionOneText&&<p>Theconditionmustbefalse!</p>} </div> ) } 好的例子:
importReact,{useState}from'react' exportconstConditionalRenderingGood=()=>{ const[showConditionOneText,setShowConditionOneText]=useState(false) consthandleClick=()=> setShowConditionOneText(showConditionOneText=>!showConditionOneText) return( <div> <buttononClick={handleClick}>Togglethetext</button> {showConditionOneText?( <p>Theconditionmustbetrue!</p> ):( <p>Theconditionmustbefalse!</p> )} </div> ) } Boolean props
一个真实的props可以提供给一个组件，只有props名称而没有值，比如：myTruthyProp。写成myTruthyProp={true}是不必要的。
糟糕的例子:
importReactfrom'react' constHungryMessage=({isHungry})=>( <span>{isHungry?'Iamhungry':'Iamfull'}</span> ) exportconstBooleanPropBad=()=>( <div> <span> <b>Thispersonishungry:</b> </span> <HungryMessageisHungry={true}/> <br/> <span> <b>Thispersonisfull:</b> </span> <HungryMessageisHungry={false}/> </div> ) 好的例子:
importReactfrom'react' constHungryMessage=({isHungry})=>( <span>{isHungry?'Iamhungry':'Iamfull'}</span> ) exportconstBooleanPropGood=()=>( <div> <span> <b>Thispersonishungry:</b> </span> <HungryMessageisHungry/> <br/> <span> <b>Thispersonisfull:</b> </span> <HungryMessageisHungry={false}/> </div> ) String props
可以用双引号提供一个字符串道具值，而不使用大括号或反斜线。
糟糕的例子:
importReactfrom'react' constGreeting=({personName})=><p>Hi,{personName}!</p> exportconstStringPropValuesBad=()=>( <div> <GreetingpersonName={"John"}/> <GreetingpersonName={'Matt'}/> <GreetingpersonName={`Paul`}/> </div> ) 好的例子:
importReactfrom'react' constGreeting=({personName})=><p>Hi,{personName}!</p> exportconstStringPropValuesGood=()=>( <div> <GreetingpersonName="John"/> <GreetingpersonName="Matt"/> <GreetingpersonName="Paul"/> </div> ) 事件处理函数
如果一个事件处理程序只需要事件对象的一个参数，你就可以像这样提供函数作为事件处理程序：onChange={handleChange}。
你不需要像这样把函数包在一个匿名函数中。
糟糕的例子:
importReact,{useState}from'react' exportconstUnnecessaryAnonymousFunctionsBad=()=>{ const[inputValue,setInputValue]=useState('') consthandleChange=e=>{ setInputValue(e.target.value) } return( <> <labelhtmlFor="name">Name:</label> <inputid="name"value={inputValue}onChange={e=>handleChange(e)}/> </> ) } 好的例子:
importReact,{useState}from'react' exportconstUnnecessaryAnonymousFunctionsGood=()=>{ const[inputValue,setInputValue]=useState('') consthandleChange=e=>{ setInputValue(e.target.value) } return( <> <labelhtmlFor="name">Name:</label> <inputid="name"value={inputValue}onChange={handleChange}/> </> ) } 将组件作为props传递
当把一个组件作为props传递给另一个组件时，如果该组件不接受任何props，你就不需要把这个传递的组件包裹在一个函数中。
糟糕的例子:
importReactfrom'react' constCircleIcon=()=>( <svgheight="100"width="100"> <circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/> </svg> ) constComponentThatAcceptsAnIcon=({IconComponent})=>( <div> <p>BelowistheiconcomponentpropIwasgiven:</p> <IconComponent/> </div> ) exportconstUnnecessaryAnonymousFunctionComponentsBad=()=>( <ComponentThatAcceptsAnIconIconComponent={()=><CircleIcon/>}/> ) 好的例子:
importReactfrom'react' constCircleIcon=()=>( <svgheight="100"width="100"> <circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/> </svg> ) constComponentThatAcceptsAnIcon=({IconComponent})=>( <div> <p>BelowistheiconcomponentpropIwasgiven:</p> <IconComponent/> </div> ) exportconstUnnecessaryAnonymousFunctionComponentsGood=()=>( <ComponentThatAcceptsAnIconIconComponent={CircleIcon}/> ) 为定义的props
未定义的props被排除在外，所以如果props未定义是可以的，就不要担心提供未定义的回退。
糟糕的例子:
importReactfrom'react' constButtonOne=({handleClick})=>( <buttononClick={handleClick||undefined}>Clickme</button> ) constButtonTwo=({handleClick})=>{ constnoop=()=>{} return<buttononClick={handleClick||noop}>Clickme</button> } exportconstUndefinedPropsBad=()=>( <div> <ButtonOne/> <ButtonOnehandleClick={()=>alert('Clicked!')}/> <ButtonTwo/> <ButtonTwohandleClick={()=>alert('Clicked!')}/> </div> ) 好的例子:
importReactfrom'react' constButtonOne=({handleClick})=>( <buttononClick={handleClick}>Clickme</button> ) exportconstUndefinedPropsGood=()=>( <div> <ButtonOne/> <ButtonOnehandleClick={()=>alert('Clicked!')}/> </div> ) 设置依赖前一个状态的状态
如果新的状态依赖于之前的状态，那么一定要把状态设置为之前状态的函数。React的状态更新可以是分批进行的，如果不这样写你的更新就会导致意外的结果。
糟糕的例子:
importReact,{useState}from'react' exportconstPreviousStateBad=()=>{ const[isDisabled,setIsDisabled]=useState(false) consttoggleButton=()=>setIsDisabled(!isDisabled) consttoggleButton2Times=()=>{ for(leti=0;i<2;i++){ toggleButton() } } return( <div> <buttondisabled={isDisabled}> I'm{isDisabled?'disabled':'enabled'} </button> <buttononClick={toggleButton}>Togglebuttonstate</button> <buttononClick={toggleButton2Times}>Togglebuttonstate2times</button> </div> ) } 好的例子:
importReact,{useState}from'react' exportconstPreviousStateGood=()=>{ const[isDisabled,setIsDisabled]=useState(false) consttoggleButton=()=>setIsDisabled(isDisabled=>!isDisabled) consttoggleButton2Times=()=>{ for(leti=0;i<2;i++){ toggleButton() } } return( <div> <buttondisabled={isDisabled}> I'm{isDisabled?'disabled':'enabled'} </button> <buttononClick={toggleButton}>Togglebuttonstate</button> <buttononClick={toggleButton2Times}>Togglebuttonstate2times</button> </div> ) } 总结
以下做法并非针对React，而是在JavaScript(以及任何编程语言)中编写干净代码的良好做法。
稍微做个总结:
- 将复杂的逻辑提取为明确命名的函数
- 将神奇的数字提取为常量
- 使用明确命名的变量
我是TianTian，我们下一期见!!!
原文地址：https://mp.weixin.qq.com/s/EXlQE5mjigSumkq2VC3NNQ
