前言

由于公司項目用的技術棧是React，個人對React還是熟悉一些，但只能算能夠熟練使用吧。雖然也很想成為大佬（持續努力中.....）。最近想復習一下各個知識點，為了后續換工作做準備，每天更新一些文章，機會嘛總是留給有準備的人，既然技術能力有限，就得早做準備，提升自己。畢竟這兩年大環境不咋地，建議能穩則穩。

React hooks閉包

React Hooks 的閉包陷阱是指在使用 React Hooks 時可能會遇到的一個常見問題，通常涉及到在回調函數或異步操作中使用 Hook 的狀態。這可能導致一些預期之外的行為，因為閉包的作用域規則會導致 Hook 的值在某些情況下不會按照預期更新。

具體而言，這個問題通常出現在使用 useState、useEffect、useCallback 等 Hook 時，當 Hook 的值在回調函數或異步操作中被引用時，可能會出現閉包引用的舊值而不是最新值的情況。

以下是一個示例，說明了這個閉包陷阱：

import React, { useState, useEffect } from 'react';


function Counter() {
  const [count, setCount] = useState(0);


  useEffect(() => {
    const intervalId = setInterval(() => {
      // 這里引用的 count 是閉包中的值，不一定是最新值
      console.log('Current count:', count);
    }, 1000);


    return () => clearInterval(intervalId);
  }, [count]);


  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}


export default Counter;

在這個例子中，setInterval 回調中引用的 count 是閉包中的值，并不一定是最新的值。這可能導致在 setInterval 中的日志輸出中看到舊的值。

為了解決這個問題，可以使用函數式更新的形式，確保在回調函數中使用的是最新值。修改上面的例子如下：

// ...


useEffect(() => {
  const intervalId = setInterval(() => {
    // 使用函數式更新確保在回調函數中使用的是最新值
    setCount(prevCount => {
      console.log('Current count:', prevCount);
      return prevCount;
    });
  }, 1000);


  return () => clearInterval(intervalId);
}, [count]);


// ...

通過使用函數式更新，確保在回調函數中使用的是最新值，從而避免了閉包陷阱帶來的問題。

為什么會出現閉包

這種情況發生的根本原因是 JavaScript 中的閉包機制。在 JavaScript 中，函數會捕獲其被創建時所處的作用域中的變量。在 React 組件中，當使用類似 useState 的 Hook 創建狀態時，該狀態是通過閉包來保存的。

讓我們深入探討為什么會發生這種情況：

1. 「useState 的異步性：」 useState 是異步的。當你調用 setCount 時，React 不會立即更新狀態，而是將更新加入到更新隊列中。因此，在 setCount 被調用后，count 并不會立即改變。
2. 「useEffect 的閉包：」 在 useEffect 中，當你引用 count 時，它會捕獲在創建 useEffect 時的 count 值，而不是在 useEffect 執行時的最新值。因此，閉包中的 count 值可能是舊的。
3. 「渲染周期和事件處理：」 在 React 中，事件處理函數和 useEffect 中的回調函數都是在渲染周期中創建的。因此，當事件處理函數或 useEffect 回調函數中引用了 count 時，它們會捕獲在它們創建時的 count 值。

為了解決這個問題，React 提供了函數式更新的機制，通過傳遞一個函數給 setCount，該函數接收前一個狀態，并返回新的狀態值。這樣確保在回調函數中使用的是最新的狀態值，而不是閉包中的舊值。

setCount(prevCount => {
  console.log('Current count:', prevCount);
  return prevCount;
});