快捷導(dǎo)航

React中閉包陷阱的幾種情及解決方案

更新時(shí)間：2024年07月25日 09:48:55 作者：每天工作十小時(shí)

在react中我們使用其提供的Hooks中的useState,useEffect,useCallback 時(shí),可能會(huì)造成閉包陷阱,下面我們來(lái)看一下出現(xiàn)的情況以及如何解決,感興趣的小伙伴跟著小編一起來(lái)看看吧

什么是閉包？

閉包是指在一個(gè)函數(shù)內(nèi)部包裹函數(shù)，并且內(nèi)部函數(shù)總能訪問(wèn)外部函數(shù)的變量。

function f1(){
    var num = 10,
    function f2(){
        alert(num)  // 10
    }
}

特點(diǎn)：

1:函數(shù)套函數(shù)；

2:內(nèi)部函數(shù)可以直接使用外部函數(shù)的局部變量或參數(shù)；

3:變量或參數(shù)不會(huì)被垃圾回收機(jī)制回收 GC

缺點(diǎn)：常駐內(nèi)存會(huì)增大內(nèi)存的使用量使用不當(dāng)會(huì)造成內(nèi)存泄露。

閉包陷阱以及如何解決

在react中我們使用其提供的Hooks中的useState，useEffect，useCallback 時(shí)，可能會(huì)造成閉包陷阱，下面我們來(lái)看一下出現(xiàn)的情況以及如何解決

useState【異步陷阱】

 const [num, setNum] = useState(0)
  const jia = () => {
    setNum(num + 1)
    console.log(num);
  }
  return (
    <div>
      <h1>{num}</h1>
      <button onClick={() => jia()}>點(diǎn)我+1</button>
    </div>
  )

問(wèn)題：當(dāng)我們點(diǎn)擊button按鈕時(shí)，會(huì)發(fā)現(xiàn)值在持續(xù) +1 ，但是打印的值始終都是上一次點(diǎn)擊的值，

因?yàn)閡seState修改值是異步更新，無(wú)法獲取更新后的值

解決方案：

const [num, setNum] = useState(0)
  const numRef = useRef()
  const jia = () => {
    setNum(num + 1)
    setTimeout(() => {  //模擬異步操作
      console.log(numRef.current.innerText);
    }, 0)
  }
  return (
    <div>
      <h1 ref={numRef}>{num}</h1>
      <button onClick={() => jia()}>點(diǎn)我+1</button>
    </div>
  )

使用useRef來(lái)獲取元素的值

useEffect【過(guò)期問(wèn)題】

const [num, setNum] = useState(0)
 
  useEffect(() => {
    setInterval(() => {
      setNum(num + 1)
    }, 1000)
  }, [])
 
  return (
    <div>
      <h1>{num}</h1>
    </div>
  )

問(wèn)題：useEffect是在頁(yè)面加載時(shí)執(zhí)行，如果第二個(gè)參數(shù)是一個(gè)空數(shù)組，則只執(zhí)行一次，所以我們可以看到頁(yè)面始終顯示的都是1

解決方案：

const [num, setNum] = useState(0)
 
  useEffect(() => {
    let time = setInterval(() => {
      setNum(num + 1)
      clearInterval(time)
    }, 1000)
  }, [num])
 
  return (
    <div>
      <h1>{num}</h1>
    </div>
  )

我們可以通過(guò)在空數(shù)組中傳入依賴項(xiàng)，使得useEffect中的邏輯在num每次更改時(shí)都會(huì)執(zhí)行，并在每次執(zhí)行后都清楚掉定時(shí)器

useCallback【緩存問(wèn)題】

useCallback是用來(lái)進(jìn)行優(yōu)化的函數(shù)，他的作用是返回一個(gè)記憶化的回調(diào)函數(shù)，該回調(diào)函數(shù)僅在其依賴項(xiàng)發(fā)生變化時(shí)才會(huì)更新。這在處理子組件的 props 或者優(yōu)化事件處理函數(shù)等場(chǎng)景中非常有用。

我們?cè)诟附M件向子組件傳遞數(shù)據(jù)，并在父組件修改值，我們會(huì)發(fā)現(xiàn)，子組件的useCallback中打印的一直都是0