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

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

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

什么是閉包？

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

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

特點：

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

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

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

缺點：常駐內存會增大內存的使用量使用不當會造成內存泄露。

閉包陷阱以及如何解決

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

useState【異步陷阱】

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

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

因為useState修改值是異步更新，無法獲取更新后的值

解決方案：

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()}>點我+1</button>
    </div>
  )

使用useRef來獲取元素的值

useEffect【過期問題】

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

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

解決方案：

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

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