精品AAA久久免费看,无码电影网,欧美日逼,日韩黄页网站大全免费在线观看,围内精品久久久久久久久久变脸,夜夜骚AV一二三区无码,嫩逼逼,狠狠草狠狠干

簡潔的代碼具有更好的可讀性，容易理解，且易于組織。本篇文章介紹 6 個在 React 中寫簡潔代碼的技巧。

1. 條件渲染（一個條件時）

當(dāng)你要根據(jù)條件來判斷，以渲染不同的組件時，比如條件滿足（為 true) 時，就渲染組件，否則不渲染（渲染空內(nèi)容），這種情況下
不要用三元運(yùn)算符，而是要用?&&?這個操作符來處理，看下面的例子：不好的代碼：

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>      {showConditionalText ? <p>The condition must be true!</p> : null}    </div>  )}

改進(jìn)后的代碼：

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>The condition must be true!</p>}    </div>  )}

2. 條件渲染（不同的條件時）

跟上面的情況有點(diǎn)像，也是根據(jù)條件來判斷渲染的組件，只是條件不滿足時不再渲染空內(nèi)容，而是渲染別的組件內(nèi)容。這個時候應(yīng)該用三元運(yùn)算符。不好的代碼：

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>      {showConditionOneText && <p>The condition must be true!</p>}      {!showConditionOneText && <p>The condition must be false!</p>}    </div>  )}

改進(jìn)后的代碼：

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. 布爾值屬性

我們經(jīng)常會傳一個布爾類型的屬性 (props) 給組件，類似?myTruthyProp={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>)

改進(jìn)后的代碼：

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>    <HungryMessage isHungry />    <br />    <span>      <b>This person is full: </b>    </span>    <HungryMessage isHungry={false} />  </div>)

這樣更簡潔點(diǎn)，雖然只是一個小小技巧，但是可以從中看出你是不是一個有經(jīng)驗(yàn)且優(yōu)秀的程序員。

4. 字符串屬性

跟上面的例子差不多，只是換成了字符串類型，這個時候，我們通常用雙引號把字符串括起來，再加上花括號，如下面這樣：不好的代碼：

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

改進(jìn)后的代碼：

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. 事件綁定函數(shù)

我們經(jīng)常會給一個組件綁定類似?onClick?或?onChange?這樣的事件，比如我們可能會這樣寫：onChange={e => handleChange(e)}，其實(shí)是沒必要的，且看：

不好的代碼：

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

改進(jìn)后的代碼：

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. 組件屬性

跟上面的例子差不多，我們也可以把組件作為屬性傳給別的組件，這個時候，支持使用把組件包成函數(shù)來傳遞，但沒有接任何參數(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 = () => (  <ComponentThatAcceptsAnIcon IconComponent={() => <CircleIcon />} />)

改進(jìn)后的代碼：

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

總結(jié)

有時候?qū)懘a我們并沒有注意到，多寫一行，或多寫內(nèi)容有什么問題，但是有時候是沒有必要的，我們盡量避免這個，寫出更好，更簡潔的代碼，這樣別人能認(rèn)為你是個有經(jīng)驗(yàn)的程序員。

以上6個優(yōu)化后的React 代碼片段，如果您認(rèn)為對您有幫助，請記得?點(diǎn)贊、留言、分享和收藏?哦~~

6 個提高 React 代碼質(zhì)量的方法 - 讓你的 React 代碼更簡潔

1. 條件渲染（一個條件時）

2. 條件渲染（不同的條件時）

3. 布爾值屬性

4. 字符串屬性

5. 事件綁定函數(shù)

6. 組件屬性

總結(jié)