React hooks的閉包陷阱是怎么回事

作者：cqhly 2024-01-08 08:35:28

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

前言

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

React hooks閉包

具體而言，這個問題通常出現在使用 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 創建狀態時，該狀態是通過閉包來保存的。

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

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

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

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

責任編輯：武曉燕來源：海燕技術棧