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

感谢各位的阅读，以上就是“React应该学会的开发技巧有哪些”的内容了，经过本文的学习后，相信大家对React应该学会的开发技巧有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！