快捷導(dǎo)航

react解決 Hooks 閉包陷阱的問題

更新時間：2026年05月29日 09:13:10 作者：光影少年

本文主要介紹了react解決 Hooks 閉包陷阱的問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

解決方案1：函數(shù)式更新（推薦處理 state 更新）
解決方案2：useRef 保存最新值（最常見）
解決方案3：正確維護 useEffect 依賴
解決方案4：useCallback + 依賴更新
解決方案5：抽離自定義 Hook（推薦業(yè)務(wù)場景）
解決方案6：React 19 的useEffectEvent（未來推薦）

React Hooks 的“閉包陷阱（stale closure）”本質(zhì)是：函數(shù)拿到的是創(chuàng)建時那一刻的 state/props，而不是最新值。常見出現(xiàn)在 setTimeout、setInterval、事件監(jiān)聽、異步請求、useEffect 中。

例如：

import { useState } from 'react';
export default function Demo() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setTimeout(() => {
      console.log(count); // 永遠打印點擊時的 count
    }, 3000);
  };
  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      <button onClick={handleClick}>
        延遲打印
      </button>
    </>
  );
}

假設(shè)：

count = 0
點擊延遲打印
馬上點擊 +1 -> count=1
3秒后輸出：0

因為 setTimeout 閉包保存的是舊 count。

解決方案1：函數(shù)式更新（推薦處理 state 更新）

適合依賴舊值計算新值。

錯誤：

setCount(count + 1);
setCount(count + 1);
console.log(count); // +1

正確：

setCount(prev => prev + 1);
setCount(prev => prev + 1);
console.log(count); // +2

React 會拿最新狀態(tài)：

setInterval(() => {
   setCount(prev => prev + 1);
},1000);

避免：

setCount(count + 1); // count 永遠舊

解決方案2：useRef 保存最新值（最常見）

適合：

setTimeout
setInterval
websocket
原生事件
防抖節(jié)流

例子：

import { useRef, useState, useEffect } from 'react';
export default function Demo() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  useEffect(() => {
    countRef.current = count;
  }, [count]);
  const handleClick = () => {
    setTimeout(() => {
      console.log(countRef.current);
    }, 3000);
  };
  return (
      <>
          <button onClick={() => setCount(count+1)}>
             +1
          </button>
          <button onClick={handleClick}>
             打印
          </button>
      </>
  );
}

始終輸出最新值。

原理：

閉包 -> 拿不到最新 state
ref.current -> 永遠最新

很多庫（例如防抖 hooks）都這么做。

解決方案3：正確維護 useEffect 依賴

錯誤：

useEffect(() => {
   getData(id);
}, []);

即使 id 變化也不會重新執(zhí)行。

應(yīng)寫：

useEffect(() => {
   getData(id);
}, [id]);

遵守 eslint：

react-hooks/exhaustive-deps

不要隨便關(guān)：

// eslint-disable-next-line

很多閉包問題來自錯誤依賴。

解決方案4：useCallback + 依賴更新

錯誤：

const getUser = useCallback(() => {
    console.log(id);
}, []);

id 永遠舊。

正確：

const getUser = useCallback(() => {
    console.log(id);
}, [id]);

解決方案5：抽離自定義 Hook（推薦業(yè)務(wù)場景）

比如輪詢：

錯誤：

useEffect(() => {
   const timer=setInterval(()=>{
      fetchData(page);
   },1000)
   return ()=>clearInterval(timer)
},[])

page 永遠舊。

改：

function useLatest(value){
   const ref=useRef(value);
   useEffect(()=>{
      ref.current=value;
   },[value])
   return ref;
}

使用：

const pageRef = useLatest(page);
useEffect(() => {
   const timer = setInterval(() => {
      fetchData(pageRef.current);
   },1000);
   return ()=>clearInterval(timer);
},[])

解決方案6：React 19 的useEffectEvent（未來推薦）

React 提供了解決閉包問題的新方案：

const onVisit = useEffectEvent(() => {
   console.log(count);
});
useEffect(()=>{
   window.addEventListener('click',onVisit)
   return ()=>{
      window.removeEventListener('click',onVisit)
   }
},[])

事件始終讀取最新 state。

適合：

訂閱
監(jiān)聽器
effect 內(nèi)回調(diào)

前端開發(fā)里可以記一個經(jīng)驗：

需要最新狀態(tài)：
→ 用 ref

依賴舊狀態(tài)更新：
→ 用函數(shù)式 setState

effect/callback 使用變量：
→ 補全依賴數(shù)組

長生命周期回調(diào)：
→ useLatest / useRef

React19：
→ useEffectEvent

像你做性能平臺、輪詢二維碼狀態(tài)、下載任務(wù)進度這些場景，setInterval + useRef 基本是閉包問題高發(fā)區(qū)。

到此這篇關(guān)于react解決 Hooks 閉包陷阱的問題的文章就介紹到這了,更多相關(guān)react Hooks 閉包陷阱內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: