React你应该学会的开发技巧【总结】!
前端人
共 9380字,需浏览 19分钟
· 2021-03-05
来源:betterprogramming.pub/8-ways-to-write-clean-react-code-610c502ccf39
关注公众号 前端人,回复“加群”
添加无广告优质学习群
干净的代码不仅仅是工作代码。简洁的代码易于阅读,易于理解并且井井有条。在本文中,我们将研究六种编写更简洁的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>
)
}
接下来你该做的
回复 资料包
领取我整理的进阶资料包回复 加群
,加入前端进阶群console.log("文章点赞===文章点在看===你我都快乐")
Bug离我更远了,下班离我更近了
评论
5.8世界红十字日 | 学会AED急救,急救为人人 【指南奉上】
2024年5月8日是第77个“世界红十字日”。世界红十字与红新月日(World Red Cross and Red Crescent Day),也称为世界红十字会日。世界红十字与红新月日的设立,旨在弘扬人道主义精神,倡导“人道、博爱、奉献”的红十字精神,宣传红十字会的宗旨、原则、历史和国际人道主义法
乐普医疗AI
0
中枪的怎么又是百度?
文 | 阑夕以前说到百度这家公司的槽点,主要还是「上有所好,下必甚焉」的问题,老板想要什么,底下的人就汇报什么,最后把老板骗出去丢人。但是百度公关副总裁接连几天的神操作,又给出了卧龙之外的凤雏答案,那就是老板好像也没做错什么,但经不住管理团队里有人偏要「造」。懈怠的错误和勤奋的愚蠢,就像是屎味的巧克
阑夕
7
伴学周签 | 什么是阿里人常说的铁军精神 ?
每周一问,共同学习关于茅庐学堂茅庐学堂总结提炼了阿里24年战略落地、组织升级、企业管理和干部培养的实践精华,并结合8年来服务超过300家行业TOP企业的实践打磨,为成长型企业战略落地组织升级提供定制式陪伴咨询服务。想要深入了解茅庐学堂服务欢迎添加学长微信或致电15394275373
茅庐学堂
0
【直播预告】智能物联2.0:行业应用新篇章丨AIoT助力下,智能家居能从“骨感的现实”走向“丰满的理想”吗?
智次方·物联网智库判断,2024年是智能物联2.0时代的开端,智能物联2.0阶段的典型特征是:通感智值一体化。这种一体化不仅能够提升智慧交通、智慧城市、智慧工厂等领域的应用能力,也为解决更复杂的社会问题,诸如资源约束和绿色发展等,提供了可能。基于上述判断,智次方·物联网智库发起了“智能物联2.0通感
物联网智库
0
一家保险公司的青年致敬篇章
文 | 阑夕年轻人被热捧,通常是以消费者的角色,商业品牌追逐他们,本质上是对错付未来市场的恐惧,在那些极尽溢美之词的背后,年轻人依然作为客体的身份,慌张迎接四面八方呈递过来的王冠。相比之下,年轻人在生产者的角色上,又如纸片般淡薄,要么活在媒体创造出来的暴富标题里,要么又坍塌为躺平摸鱼的刻板形象,都说
阑夕
24