React代碼的使用方法教程

本篇內(nèi)容介紹了“React代碼的使用方法教程”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1. 僅對(duì)一個(gè)條件進(jìn)行渲染

如果需要在條件為 true 時(shí)渲染某些內(nèi)容，而在條件為 false 時(shí)不渲染任何內(nèi)容，不要使 三元表達(dá)式，請(qǐng)改用 &&。

?‍♂? 不推薦示例：

import React, { useState } from 'react'  export const ConditionalRenderingWhenTrueBad = () => {   const [showConditionalText, setShowConditionalText] = useState(false)    const handleClick = () =>     setShowConditionalText(showConditionalText => !showConditionalText)    return (     <div>       <button onClick={handleClick}>Toggle the text</button>       {/* 三元表達(dá)式 */}       {showConditionalText ? <p>條件為 True!</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}>Toggle the text</button>       {showConditionalText && <p>條件為 True!</p>}     </div>   ) }

2. 每一個(gè)條件都進(jìn)行渲染

如果需要在條件為 true 時(shí)渲染某些內(nèi)容，而在條件為 false 時(shí)渲染其他內(nèi)容。使用三元表達(dá)式!

?‍♂? 不推薦的示例：

import React, { useState } from 'react'  export const ConditionalRenderingBad = () => {   const [showConditionOneText, setShowConditionOneText] = useState(false)    const handleClick = () =>     setShowConditionOneText(showConditionOneText => !showConditionOneText)    return (     <div>       <button onClick={handleClick}>Toggle the text</button>       {/* 條件 True 和 False 都要渲染內(nèi)容 */}       {showConditionOneText && <p>條件為 True!</p>}       {!showConditionOneText && <p>條件為 Flase!</p>}     </div>   ) }

? 推薦示例：

import React, { useState } from 'react'  export const ConditionalRenderingGood = () => {   const [showConditionOneText, setShowConditionOneText] = useState(false)    const handleClick = () =>     setShowConditionOneText(showConditionOneText => !showConditionOneText)    return (     <div>       <button onClick={handleClick}>Toggle the text</button>       {showConditionOneText ? (         <p>The condition must be true!</p>       ) : (         <p>The condition must be false!</p>       )}     </div>   ) }

3. Boolean props

Props 值為 true 的推薦省略不寫。

?‍♂? 不推薦示例：

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

? 推薦示例：

import React from 'react'  const HungryMessage = ({ isHungry }) => (   <span>{isHungry ? 'I am hungry' : 'I am full'}</span> )  export const BooleanPropGood = () => (   <div>     <span>       <b>This person is hungry: </b>     </span>     {/* 不需要賦值 true，省略 */}     <HungryMessage isHungry />     <br />     <span>       <b>This person is full: </b>     </span>     <HungryMessage isHungry={false} />   </div> )

4. String props

Props 值為 String, 使用雙引號(hào)，不使用花括號(hào)或反引號(hào)。

?‍♂? 不推薦示例：

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> )

5. Event handler functions

如果一個(gè)事件函數(shù)只接受一個(gè)參數(shù)，不需要傳入匿名函數(shù)：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 (     <>       <label htmlFor="name">Name: </label>       {/* 事件只有一個(gè)參數(shù)，不需要匿名函數(shù)*/}       <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} />     </>   ) }

6. components as props

將組件作為參數(shù)傳遞給另一個(gè)組件時(shí)，如果該組件不接受任何參數(shù)，則無(wú)需將該傳遞的組件包裝在函數(shù)中。

?‍♂? 不推薦示例：

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>     <p>Below is the icon component prop I was given:</p>     <IconComponent />   </div> )  export const UnnecessaryAnonymousFunctionComponentsBad = () => (   {/* 組件不需要包裝在函數(shù)中 */}   <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>     <p>Below is the icon component prop I was given:</p>     <IconComponent />   </div> )  export const UnnecessaryAnonymousFunctionComponentsGood = () => (   <ComponentThatAcceptsAnIcon IconComponent={CircleIcon} /> )

7. undefined props

如果參數(shù)為 undefined 是允許的，那么不要提供 undefined 作為回退值。

?‍♂? 不推薦示例：

import React from 'react'  const ButtonOne = ({ handleClick }) => (   <button onClick={handleClick || undefined}>Click me</button> )  const ButtonTwo = ({ handleClick }) => {   const noop = () => {}    return <button onClick={handleClick || noop}>Click me</button> }  export const UndefinedPropsBad = () => (   <div>     <ButtonOne />     <ButtonOne handleClick={() => alert('Clicked!')} />     <ButtonTwo />     <ButtonTwo handleClick={() => alert('Clicked!')} />   </div> )

? 推薦示例：

import React from 'react'  const ButtonOne = ({ handleClick }) => (   <button onClick={handleClick}>Click me</button> )  export const UndefinedPropsGood = () => (   <div>     <ButtonOne />     <ButtonOne handleClick={() => alert('Clicked!')} />   </div> )

8. 設(shè)置 state 依賴先前的 state

如果新 state 依賴于先前 state，則始終將 state 設(shè)置為先前 state 的函數(shù)?？梢耘幚?React 狀態(tài)更新。

?‍♂? 不推薦示例：

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}>Toggle button state</button>       <button onClick={toggleButton2Times}>Toggle button state 2 times</button>     </div>   ) }

? 推薦示例：

import React, { useState } from 'react'  export const PreviousStateGood = () => {   const [isDisabled, setIsDisabled] = useState(false)    {/* 推薦設(shè)置為函數(shù) */}   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}>Toggle button state</button>       <button onClick={toggleButton2Times}>Toggle button state 2 times</button>     </div>   ) }

“React代碼的使用方法教程”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！