编写干净的React代码的技巧

前言干净的代码易于阅读、易于理解且组织整齐。在这篇文章中，列出了一些可能需要注意的点。如果您不同意其中任何一个，那完全没问题。仅针对一个条件的条件渲染如果您需要在一个条件为真时有条件地渲染某些东西，而在一个条件为假时什么都不渲染，请不要使用三元运算符。请改用&&运算符。错误示例：importReact,{useState}from'react'exportconstConditionalRenderingWhenTrueBad=()=>{const[showConditionalText,setShowConditionalText]=useState(false)consthandleClick=()=>setShowConditionalText(showConditionalText=>!showConditionalText)return(

)}很好的例子：importReact,{useState}from'react'exportconstConditionalRenderingWhenTrueGood=()=>{const[showConditionalText,setShowConditionalText]=useState(false)constandleClick=()=>setShowConditionalText(showConditionalText=>!showConditionalText)return()}条件渲染是指在任何条件下，如果你需要有条件地在一个条件为真时渲染一件事，在条件为假时有条件地渲染另一件事，请使用三元运算符。糕点的例子:importReact,{useState}from'react'exportconstConditionalRenderingBad=()=>{const[showConditionOneText,setShowConditionOneText]=useState(false)constandleClick=()=>setShowConditionOneText(showConditionOneText=>!showConditionOneText)return()}好的例子:importReact,{useState}from'react'exportconstconditionalRenderingGood=()=>{const[showConditionOneText,setShowConditionOneText]=useState(false)constandleClick=()=>setShowConditionOneText(showConditionOneText=>!showConditionOneText)返回()}布尔属性一个真实的props可以提供给只有propsname而没有value的组件，例如：myTruthyProp写成myTruthyProp={true}是不必要的。错误示例：importReactfrom'react'constHungryMessage=({isHungry})=>({isHungry?'Iamhungry':'Iamfull'})exportconstBooleanPropBad=()=>(