前言

我已經(jīng)使用 React 多年，我確信我非常了解它，但最近我的老板對(duì)我說(shuō)，“你根本不知道 React，你對(duì)它一無(wú)所知。”

按需搭建網(wǎng)站可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)構(gòu)思過(guò)程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

我很生他的氣，但他指出了我程序中的三個(gè)漏洞。我現(xiàn)在把它記錄下來(lái)，也分享給還不知道的小伙伴。

1、你知道“&&”的用法嗎？

在React程序中，我經(jīng)常使用“&&”運(yùn)算符來(lái)決定是否顯示內(nèi)容，具體方式如下：

const App = () => {
  const [ list, setList ] = useState([])

  // Simulation request data
  setTimeout(() => {
    setList([ 'fatfish', 'medium' ])
  }, 2000)

  return (
    
{ list.length &&  }

  )
}

我老板：“你不知道&&”運(yùn)算符的特點(diǎn)嗎？當(dāng)請(qǐng)求還沒(méi)有成功返回時(shí)，會(huì)直接渲染“0”。

我不服氣，因?yàn)槲乙恢倍际沁@樣寫(xiě)代碼，從來(lái)沒(méi)有犯過(guò)錯(cuò)誤。為了證明老大錯(cuò)了，我寫(xiě)了下面的例子。

const List = ({ list = [] }) => {
  return (
    

      {
        list.map((name) => {
          return 
{ name }

        })
      }
    

  )
}

const App = () => {
  const [ list, setList ] = React.useState([ ])

  // Simulation request data
  setTimeout(() => {
    setList([ 'fatfish', 'medium' ])  
  }, 3000)

  return (
    list.length && 
  )
}

ReactDOM.render(, document.getElementById('app'))

我的天??！老大說(shuō)的對(duì)，一開(kāi)始頁(yè)面顯示0，3秒后顯示列表。

為什么？

來(lái)自 MDN的提示：“當(dāng)且僅當(dāng)所有操作數(shù)都為真時(shí)，一組布爾操作數(shù)的邏輯與 (&&) 運(yùn)算符（邏輯合?。┎艦檎?。否則就是假的。”

更一般地，運(yùn)算符返回從左到右計(jì)算時(shí)遇到的第一個(gè)假操作數(shù)的值，或者如果它們都是真值，則返回最后一個(gè)操作數(shù)的值。

例子如下：

const x1 = 0
const x2 = 'fatfish'
const x3 = 1
const x4 = 'medium'
console.log(x1 && x2) // 0
console.log(x3 && x4) // medium

現(xiàn)在我終于明白為什么寫(xiě)這樣的代碼會(huì)導(dǎo)致錯(cuò)誤。原因如下：

list.length &&  
0 &&  // 0

如何解決？

我找到了三種方法來(lái)解決這個(gè)問(wèn)題。我希望你不要犯和我一樣的錯(cuò)誤，祝福你。

// 1. Convert list.length to boolean
!!list.length && 

// 2. Use ternary expressions and null
list.length ?  : null

// 3. Controlled by specific logic
list.length >= 1 && 

2.“props.children”的奇怪行為

我猜你寫(xiě)過(guò)類似的代碼。當(dāng)向 組件傳遞內(nèi)容時(shí)，會(huì)顯示“children”。如果沒(méi)有，將顯示一個(gè)空的工具提示。像下面這樣：

const Container = ({ children }) => {
  if (children) {
    return (
      

        
The content of children is:

        { children }
      

    ) 
  } else {
    return (
      
empty

    )
  }
}

我的老板：“你要小心使用‘children’屬性，它會(huì)導(dǎo)致邏輯異常！就像在以下情況中一樣?！?/p>

1）.清空列表數(shù)據(jù)

你認(rèn)為這個(gè)例子會(huì)顯示什么——“空”？

不幸的是，答案是另一個(gè)。你是不是也覺(jué)得不可思議？朋友們，我們一定要非常小心地使用 props.children。否則，老板可能會(huì)扣你的工資。

const Container = ({ children }) => {
  if (children) {
    return (
      

        
The content of children is:

        { children }
      

    ) 
  } else {
    return (
      
empty

    )
  }
}
const App = () => {
  const [ list, setList ] = React.useState([])

  return (
    
      {
        list.map((name) => {
          return 
{ name }
  
        })
      }
    
  )
}
ReactDOM.render(, document.getElementById('app'))

為什么？

讓我們向“Container”組件添加一行代碼，并嘗試打印children是什么！

const Container = ({ children }) => {
  console.log(children, 'children')
  // ...
}

是的，你是對(duì)的。此時(shí)“children”為空數(shù)組，所以顯示“children的內(nèi)容為：”而不是“empty”。

如何解決？

使用 React.Children.toArray 解決這個(gè)問(wèn)題會(huì)很容易，然后你會(huì)看到顯示“empty”。所以如果你真的需要用children作為條件判斷，我建議你使用這個(gè)方法！

const Container = ({ children }) => {
  // if (children) {
  // Pay attention here
  if (React.Children.toArray(children).length) {  
    return (
      

        
The content of children is:

        { children }
      

    ) 
  } else {
    return (
      
empty

    )
  }
}

3.關(guān)于掛載和更新的問(wèn)題

在 React 中通過(guò)狀態(tài)來(lái)切換組件是很常見(jiàn)的，但是，這個(gè)小東西也會(huì)讓你感到困惑。

在下面的代碼中，你認(rèn)為當(dāng)你切換name的值時(shí)，一個(gè)Demo組件會(huì)被卸載，另一個(gè)會(huì)被掛載嗎？

class Demo extends React.Component {
  componentDidMount() {
    console.log('componentDidMount', this.props.name);
  }
  componentDidUpdate() {
    console.log('componentDidUpdate', this.props.name);
  }

  render () {
    return (
      

        { this.props.name }
      

    )
  }
}
const App = () => {
  const [ name, setName ] = React.useState('fatfish')
  const onClick = () => {
    setName(name === 'fatfish' ? 'medium' : 'fatfish')
  }
  return (
    

      {
        name === 'fatfish' ? 
           : 
          
      }
      click
    

  )
}
ReactDOM.render(, document.getElementById('app'))

我錄制了一個(gè)簡(jiǎn)短的 gif 給你真相。

你也可以通過(guò) CodePen 試試，https://codepen.io/qianlong/pen/NWywodV

為什么？

雖然，我們寫(xiě)了兩個(gè) Demo 組件，假設(shè)它們會(huì)分別掛載和更新，但 React 認(rèn)為它們是同一個(gè)組件，所以 componentDidMount 只會(huì)執(zhí)行一次。

如何解決？

但是當(dāng)我們要寫(xiě)兩個(gè)相同的組件但是傳遞不同的參數(shù)時(shí)，我們應(yīng)該怎么辦呢？

是的，你應(yīng)該為這兩個(gè)組件添加不同的鍵，這樣 React 就會(huì)認(rèn)為它們是不同的組件。componentDidMount 也會(huì)單獨(dú)執(zhí)行。

我們?cè)囋嚳矗?/p>

//...
// Pay attention here
name === 'fatfish' ?  : 
//...

你也可以通過(guò) CodePen 試試，https://codepen.io/qianlong/pen/NWywodV。

分享標(biāo)題：我老板：你根本不懂 React！
文章起源：http://uogjgqi.cn/article/dpcgpsg.html