React代码的使用方法教程
本篇内容介绍了“React代码的使用方法教程”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联建站服务项目包括万秀网站建设、万秀网站制作、万秀网页制作以及万秀网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,万秀网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到万秀省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
1. 仅对一个条件进行渲染
如果需要在条件为 true 时渲染某些内容,而在条件为 false 时不渲染任何内容,不要使 三元表达式,请改用 &&。
?♂️ 不推荐示例:
import React, { useState } from 'react' export const ConditionalRenderingWhenTrueBad = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ({/* 三元表达式 */} {showConditionalText ?) }条件为 True!
: null}
? 推荐示例:
import React, { useState } from 'react' export const ConditionalRenderingWhenTrueGood = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ({showConditionalText &&) }条件为 True!
}
2. 每一个条件都进行渲染
如果需要在条件为 true 时渲染某些内容,而在条件为 false 时渲染其他内容。使用三元表达式!
?♂️ 不推荐的示例:
import React, { useState } from 'react' export const ConditionalRenderingBad = () => { const [showConditionOneText, setShowConditionOneText] = useState(false) const handleClick = () => setShowConditionOneText(showConditionOneText => !showConditionOneText) return ({/* 条件 True 和 False 都要渲染内容 */} {showConditionOneText &&) }条件为 True!
} {!showConditionOneText &&条件为 Flase!
}
? 推荐示例:
import React, { useState } from 'react' export const ConditionalRenderingGood = () => { const [showConditionOneText, setShowConditionOneText] = useState(false) const handleClick = () => setShowConditionOneText(showConditionOneText => !showConditionOneText) return ({showConditionOneText ? () }The condition must be true!
) : (The condition must be false!
)}
3. Boolean props
Props 值为 true 的推荐省略不写。
?♂️ 不推荐示例:
import React from 'react' const HungryMessage = ({ isHungry }) => ( {isHungry ? 'I am hungry' : 'I am full'} ) export const BooleanPropBad = () => (This person is hungry:)
This person is full:
? 推荐示例:
import React from 'react' const HungryMessage = ({ isHungry }) => ( {isHungry ? 'I am hungry' : 'I am full'} ) export const BooleanPropGood = () => (This person is hungry: {/* 不需要赋值 true,省略 */})
This person is full:
4. String props
Props 值为 String, 使用双引号,不使用花括号或反引号。
?♂️ 不推荐示例:
import React from 'react' const Greeting = ({ personName }) =>Hi, {personName}!
export const StringPropValuesBad = () => ()
? 推荐示例:
import React from 'react' const Greeting = ({ personName }) =>Hi, {personName}!
export const StringPropValuesGood = () => ()
5. Event handler functions
如果一个事件函数只接受一个参数,不需要传入匿名函数:onChange={e=>handleChange(e)},推荐这种写法:onChange={handleChange} 。
?♂️ 不推荐示例:
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 ( <> > ) }
6. components as props
将组件作为参数传递给另一个组件时,如果该组件不接受任何参数,则无需将该传递的组件包装在函数中。
?♂️ 不推荐示例:
import React from 'react' const CircleIcon = () => ( ) const ComponentThatAcceptsAnIcon = ({ IconComponent }) => () export const UnnecessaryAnonymousFunctionComponentsBad = () => ( {/* 组件不需要包装在函数中 */}Below is the icon component prop I was given:
} /> )
? 推荐示例:
import React from 'react' const CircleIcon = () => ( ) const ComponentThatAcceptsAnIcon = ({ IconComponent }) => () export const UnnecessaryAnonymousFunctionComponentsGood = () => (Below is the icon component prop I was given:
)
7. undefined props
如果参数为 undefined 是允许的,那么不要提供 undefined 作为回退值。
?♂️ 不推荐示例:
import React from 'react' const ButtonOne = ({ handleClick }) => ( ) const ButtonTwo = ({ handleClick }) => { const noop = () => {} return } export const UndefinedPropsBad = () => ()alert('Clicked!')} /> alert('Clicked!')} />
? 推荐示例:
import React from 'react' const ButtonOne = ({ handleClick }) => ( ) export const UndefinedPropsGood = () => ()alert('Clicked!')} />
8. 设置 state 依赖先前的 state
如果新 state 依赖于先前 state,则始终将 state 设置为先前 state 的函数。可以批处理 React 状态更新。
?♂️ 不推荐示例:
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代码的使用方法教程
文章源于:http://scyanting.com/article/pedeho.html