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應該學會的開發技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！