十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要讲解了“React应该学会的开发技巧有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React应该学会的开发技巧有哪些”吧!
成都创新互联公司专注于原阳网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供原阳营销型网站建设,原阳网站制作、原阳网页设计、原阳网站官网定制、小程序定制开发服务,打造原阳网络公司原创品牌,更为您提供原阳网站排名全网营销落地服务。
1.仅针对一种条件渲染
如果你要为某个条件成立时渲染某些元素,请不要使用三元运算符。请改用&&运算符。
不推荐写法:
import React, { useState } from 'react' export const ConditionalRenderingWhenTrueBad = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ({showConditionalText ?) }成立显示内容
: null}
推荐写法:
import React, { useState } from 'react' export const ConditionalRenderingWhenTrueGood = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ({showConditionalText &&) }成立显示内容!
}
2.Boolean Props简写
isHungry处简写了
不推荐写法:
import React from 'react' const HungryMessage = ({ isHungry }) => ( {isHungry ? 'I am hungry' : 'I am full'} ) export const BooleanPropBad = () => ()
推荐写法:
import React from 'react' const HungryMessage = ({ isHungry }) => ( {isHungry ? 'I am hungry' : 'I am full'} ) export const BooleanPropGood = () => ()
3.String Props简写
personName处简写了
不推荐写法:
import React from 'react' const Greeting = ({ personName }) =>Hi, {personName}!
export const StringPropValuesBad = () => ()
推荐写法:
import React from 'react' const Greeting = ({ personName }) =>Hi, {personName}!
export const StringPropValuesGood = () => ()
4.事件处理函数简写
onChange处简写了
不推荐写法:
import React, { useState } from 'react' export const UnnecessaryAnonymousFunctionsBad = () => { const [inputValue, setInputValue] = useState('') const handleChange = e => { setInputValue(e.target.value) } return ( <> handleChange(e)} /> > ) }
推荐写法:
import React, { useState } from 'react' export const UnnecessaryAnonymousFunctionsGood = () => { const [inputValue, setInputValue] = useState('') const handleChange = e => { setInputValue(e.target.value) } return ( <> > ) }
5.组件作为参数返回
IconComponent处简写了
不推荐写法:
import React from 'react' const CircleIcon = () => ( ) const ComponentThatAcceptsAnIcon = ({ IconComponent }) => () export const UnnecessaryAnonymousFunctionComponentsBad = () => (} /> )
推荐写法:
import React from 'react' const CircleIcon = () => ( ) const ComponentThatAcceptsAnIcon = ({ IconComponent }) => () export const UnnecessaryAnonymousFunctionComponentsGood = () => ()
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 () }
推荐写法:
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 () }
感谢各位的阅读,以上就是“React应该学会的开发技巧有哪些”的内容了,经过本文的学习后,相信大家对React应该学会的开发技巧有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!