React你应该学会的开发技巧

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

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

1.仅针对一种条件渲染

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

不推荐写法：

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

推荐写法：

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

2.Boolean Props简写

isHungry处简写了

不推荐写法：

import React from react const HungryMessage = ({  isHungry }) => (   <span>{ isHungry ? I am hungry : I am full}</span> ) export const BooleanPropBad = () => (   <div>     <HungryMessage isHungry={ true} />     <HungryMessage isHungry={ false} />   </div> ) 

推荐写法：

import React from react const HungryMessage = ({  isHungry }) => (   <span>{ isHungry ? I am hungry : I am full}</span> ) export const BooleanPropGood = () => (   <div>     <HungryMessage isHungry />     <HungryMessage isHungry={ false} />   </div> ) 

3.String Props简写

personName处简写了

不推荐写法：

import React from react const Greeting = ({  personName }) => <p>Hi, { personName}!</p> export const StringPropValuesBad = () => (   <div>     <Greeting personName={ "John"} />     <Greeting personName={ Matt} />     <Greeting personName={ `Paul`} />   </div> ) 

推荐写法：

import React from react const Greeting = ({  personName }) => <p>Hi, { personName}!</p> export const StringPropValuesGood = () => (   <div>     <Greeting personName="John" />     <Greeting personName="Matt" />     <Greeting personName="Paul" />   </div> ) 

4.事件处理函数简写

onChange处简写了

不推荐写法：

import React, {  useState } from react export const UnnecessaryAnonymousFunctionsBad = () => {    const [inputValue, setInputValue] = useState()   const handleChange = e => {      setInputValue(e.target.value)   }   return (     <>       <label htmlFor="name">Name: </label>       <input id="name" value={ inputValue} onChange={ e => handleChange(e)} />     </>   ) } 

推荐写法：

import React, {  useState } from react export const UnnecessaryAnonymousFunctionsGood = () => {    const [inputValue, setInputValue] = useState()   const handleChange = e => {      setInputValue(e.target.value)   }   return (     <>       <label htmlFor="name">Name: </label>       <input id="name" value={ inputValue} onChange={ handleChange} />     </>   ) } 

5.组件作为参数返回

IconComponent处简写了

不推荐写法：

import React from react const CircleIcon = () => (   <svg height="100" width="100">     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />   </svg> ) const ComponentThatAcceptsAnIcon = ({  IconComponent }) => (   <div>     <IconComponent />   </div> ) export const UnnecessaryAnonymousFunctionComponentsBad = () => (   <ComponentThatAcceptsAnIcon IconComponent={ () => <CircleIcon />} /> ) 

推荐写法：

import React from react const CircleIcon = () => (   <svg height="100" width="100">     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />   </svg> ) const ComponentThatAcceptsAnIcon = ({  IconComponent }) => (   <div>     <IconComponent />   </div> ) export const UnnecessaryAnonymousFunctionComponentsGood = () => (   <ComponentThatAcceptsAnIcon IconComponent={ CircleIcon} /> ) 

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 (     <div>       <button disabled={ isDisabled}>         Im { isDisabled ? disabled : enabled}       </button>       <button onClick={ toggleButton}>切换按钮状态</button>       <button onClick={ toggleButton2Times}>切换按钮状态2次</button>     </div>   ) } 

推荐写法：

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 (     <div>       <button disabled={ isDisabled}>         Im { isDisabled ? disabled : enabled}       </button>       <button onClick={ toggleButton}>切换按钮状态</button>       <button onClick={ toggleButton2Times}>切换按钮状态2次</button>     </div>   ) } 

本文转载自微信公众号「前端人」，可以通过以下二维码关注。该学转载本文请联系前端人公众号。云服务器

很赞哦!（9）