在 React 函数组件里用 `useEffect` 处理定时器、事件订阅或者异步请求时，经常会遇到一个隐蔽的问题：回调函数里拿到的 state 或 props 永远是初始值，而不是最新的值。比如一个计数器每秒加一，但定时器里 `count` 始终是 0；或者一个搜索框，输入变化后发请求，但拿到的一直是第一次的输入。这类问题通常被叫做“闭包陷阱”或“陈旧闭包”，根源在于每次渲染都有独立的函数作用域和 state 快照，而 `useEffect` 只会在依赖数组变化时重新执行。如果依赖数组为空，effect 只在挂载时运行一次，它捕获的便是首次渲染的闭包。文章会从实际代码出发，分析几种常见的触发场景，并给出不用滥用 `useRef`、也能正确处理依赖的写法，包括函数式更新、正确声明依赖以及清理副作用的时机。

先看一个最简单的例子。组件挂载后启动一个 `setInterval`，每隔一秒打印 `count`：

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

 useEffect(() => {
 const id = setInterval(() => {
 console.log(count); // 永远输出 0
 setCount(count + 1); // 永远设置成 1
 }, 1000);
 return () => clearInterval(id);
 }, []); // 空依赖

 return <h1>{count}</h1>;
}
```

运行后会发现界面只从 0 变成 1，然后不再变化。原因就是 `useEffect` 中的回调只创建了一次，它引用的 `count` 是第一次渲染时的常量 0。之后每次 `setCount` 触发重新渲染，组件函数重新执行，产生了新的 `count` 变量和新的 `setInterval` 回调，但 effect 因为依赖为空并不会重新运行，所以旧的定时器仍然持有旧的闭包。

很多人第一反应是把 `count` 放进依赖数组：

```jsx
useEffect(() => {
 const id = setInterval(() => {
 setCount(count + 1);
 }, 1000);
 return () => clearInterval(id);
}, [count]);
```

这样确实能让计数正常跑起来，但每次 `count` 变化都会清除旧定时器、创建新定时器。如果定时器间隔很短，或者内部还有其他副作用（比如网络请求），频繁重建可能带来性能问题或意外行为。更干净的做法是使用函数式更新，让 `setCount` 自己拿到最新值：

```jsx
useEffect(() => {
 const id = setInterval(() => {
 setCount(c => c + 1); // 不依赖外部 count
 }, 1000);
 return () => clearInterval(id);
}, []);
```

这样依赖数组保持为空，定时器只创建一次，同时每次更新都基于最新的 state。这个模式同样适用于需要读取多个 state 的场景，只要更新逻辑能写成纯函数。

但并非所有情况都能靠函数式更新解决。比如 effect 里需要根据最新的 `userId` 发起请求，或者需要读取 `props` 做条件判断。这时把变量放进依赖数组是正确的做法，同时要处理好竞态和清理：

```jsx
useEffect(() => {
 let cancelled = false;
 async function fetchData() {
 const res = await fetch(`/api/user/${userId}`);
 const data = await res.json();
 if (!cancelled) setUser(data);
 }
 fetchData();
 return () => { cancelled = true; };
}, [userId]);
```

这里 `userId` 变化会重新执行 effect，旧的请求结果通过 `cancelled` 标记被忽略，避免了过期数据覆盖新数据。这是依赖数组配合清理函数的典型写法，比强行用 `useRef` 保存最新值更直观。

另一个经常踩坑的地方是把函数定义在组件内部，然后作为依赖传给子组件或者放进 effect。比如：

```jsx
function Search() {
 const [query, setQuery] = useState('');

 const fetchResults = () => {
 fetch(`/search?q=${query}`).then(...);
 };

 useEffect(() => {
 const id = setTimeout(fetchResults, 300);
 return () => clearTimeout(id);
 }, [fetchResults]); // 每次渲染 fetchResults 都是新函数
}
```

因为 `fetchResults` 在每次渲染时都会重新创建，依赖它会导致 effect 每次都重新执行，防抖完全失效。解决办法是用 `useCallback` 包裹函数并正确声明它的依赖，或者直接把函数定义移到 effect 内部：

```jsx
useEffect(() => {
 const id = setTimeout(() => {
 fetch(`/search?q=${query}`).then(...);
 }, 300);
 return () => clearTimeout(id);
}, [query]);
```

这样依赖清晰，逻辑内聚，也避免了额外包装。

还有一种情况是 effect 里需要读取一个频繁变化的值，但又不希望它触发重新执行。比如一个日志上报的 effect，想拿到最新的 `scrollY` 但只在组件卸载时上报一次。直接写空依赖会拿到初始值。这时可以用 `useRef` 保存最新值：

```jsx
const scrollYRef = useRef(0);

useEffect(() => {
 const onScroll = () => { scrollYRef.current = window.scrollY; };
 window.addEventListener('scroll', onScroll);
 return () => {
 window.removeEventListener('scroll', onScroll);
 report(scrollYRef.current); // 卸载时读到最新值
 };
}, []);
```

`useRef` 返回的对象在组件生命周期内保持不变，修改 `.current` 不会触发渲染，适合这种“只读最新值”的场景。但它不应该成为逃避依赖数组的万能药，滥用会让代码难以追踪数据流。

React 官方在 `eslint-plugin-react-hooks` 里提供了 `exhaustive-deps` 规则，能提示遗漏的依赖。开启后虽然会报很多警告，但每一条都值得认真对待：要么把变量补进依赖，要么用函数式更新或 `useRef` 重构，让 effect 真正自洽。依赖数组不是“性能开关”，而是声明 effect 使用了哪些响应式值。理解每次渲染都有独立闭包，才能写出既正确又不容易出 bug 的 effect。

 推荐查看天气：https://www.0dtq.com/jiuquan/zuotian.html
 推荐查看天气：https://www.0dtq.com/jiuquan/7tian.html
 推荐查看天气：https://www.0dtq.com/jiuquan/10tian.html
 推荐查看天气：https://www.0dtq.com/jiuquan/15tian.html
 推荐查看天气：https://www.0dtq.com/jiuquan/40tian.html
 推荐查看天气：https://www.0dtq.com/jinta/
 推荐查看天气：https://www.0dtq.com/jinta/zuotian.html
 推荐查看天气：https://www.0dtq.com/jinta/7tian.html
 推荐查看天气：https://www.0dtq.com/jinta/10tian.html
 推荐查看天气：https://www.0dtq.com/jinta/15tian.html
 推荐查看天气：https://www.0dtq.com/jinta/40tian.html
 推荐查看天气：https://www.0dtq.com/anxi/
 推荐查看天气：https://www.0dtq.com/anxi/zuotian.html
 推荐查看天气：https://www.0dtq.com/anxi/7tian.html
 推荐查看天气：https://www.0dtq.com/anxi/10tian.html
 推荐查看天气：https://www.0dtq.com/anxi/15tian.html
 推荐查看天气：https://www.0dtq.com/anxi/40tian.html
 推荐查看天气：https://www.0dtq.com/subei/
 推荐查看天气：https://www.0dtq.com/subei/zuotian.html
 推荐查看天气：https://www.0dtq.com/subei/7tian.html
 推荐查看天气：https://www.0dtq.com/subei/10tian.html
 推荐查看天气：https://www.0dtq.com/subei/15tian.html
 推荐查看天气：https://www.0dtq.com/subei/40tian.html
 推荐查看天气：https://www.0dtq.com/akesai/
 推荐查看天气：https://www.0dtq.com/akesai/zuotian.html
 推荐查看天气：https://www.0dtq.com/akesai/7tian.html
 推荐查看天气：https://www.0dtq.com/akesai/10tian.html
 推荐查看天气：https://www.0dtq.com/akesai/15tian.html
 推荐查看天气：https://www.0dtq.com/akesai/40tian.html
 推荐查看天气：https://www.0dtq.com/yumen/
 推荐查看天气：https://www.0dtq.com/yumen/zuotian.html
 推荐查看天气：https://www.0dtq.com/yumen/7tian.html
 推荐查看天气：https://www.0dtq.com/yumen/10tian.html
 推荐查看天气：https://www.0dtq.com/yumen/15tian.html
 推荐查看天气：https://www.0dtq.com/yumen/40tian.html
 推荐查看天气：https://www.0dtq.com/dunhuang/
 推荐查看天气：https://www.0dtq.com/dunhuang/zuotian.html
 推荐查看天气：https://www.0dtq.com/dunhuang/7tian.html
 推荐查看天气：https://www.0dtq.com/dunhuang/10tian.html
 推荐查看天气：https://www.0dtq.com/dunhuang/15tian.html
 推荐查看天气：https://www.0dtq.com/dunhuang/40tian.html
 推荐查看天气：https://www.0dtq.com/qingyang/
 推荐查看天气：https://www.0dtq.com/qingyang/zuotian.html
 推荐查看天气：https://www.0dtq.com/qingyang/7tian.html
 推荐查看天气：https://www.0dtq.com/qingyang/10tian.html
 推荐查看天气：https://www.0dtq.com/qingyang/15tian.html
 推荐查看天气：https://www.0dtq.com/qingyang/40tian.html
 推荐查看天气：https://www.0dtq.com/xifeng/
 推荐查看天气：https://www.0dtq.com/xifeng/zuotian.html
 推荐查看天气：https://www.0dtq.com/xifeng/7tian.html
 推荐查看天气：https://www.0dtq.com/xifeng/10tian.html
 推荐查看天气：https://www.0dtq.com/xifeng/15tian.html
 推荐查看天气：https://www.0dtq.com/xifeng/40tian.html
 推荐查看天气：https://www.0dtq.com/qingcheng/
 推荐查看天气：https://www.0dtq.com/qingcheng/zuotian.html
 推荐查看天气：https://www.0dtq.com/qingcheng/7tian.html
 推荐查看天气：https://www.0dtq.com/qingcheng/10tian.html
 推荐查看天气：https://www.0dtq.com/qingcheng/15tian.html
 推荐查看天气：https://www.0dtq.com/qingcheng/40tian.html
 推荐查看天气：https://www.0dtq.com/huanxian/
 推荐查看天气：https://www.0dtq.com/huanxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/huanxian/7tian.html
 推荐查看天气：https://www.0dtq.com/huanxian/10tian.html
 推荐查看天气：https://www.0dtq.com/huanxian/15tian.html
 推荐查看天气：https://www.0dtq.com/huanxian/40tian.html
 推荐查看天气：https://www.0dtq.com/huachi/
 推荐查看天气：https://www.0dtq.com/huachi/zuotian.html
 推荐查看天气：https://www.0dtq.com/huachi/7tian.html
 推荐查看天气：https://www.0dtq.com/huachi/10tian.html
 推荐查看天气：https://www.0dtq.com/huachi/15tian.html
 推荐查看天气：https://www.0dtq.com/huachi/40tian.html
 推荐查看天气：https://www.0dtq.com/heshui/
 推荐查看天气：https://www.0dtq.com/heshui/zuotian.html
 推荐查看天气：https://www.0dtq.com/heshui/7tian.html
 推荐查看天气：https://www.0dtq.com/heshui/10tian.html
 推荐查看天气：https://www.0dtq.com/heshui/15tian.html
 推荐查看天气：https://www.0dtq.com/heshui/40tian.html
 推荐查看天气：https://www.0dtq.com/zhengning/
 推荐查看天气：https://www.0dtq.com/zhengning/zuotian.html
 推荐查看天气：https://www.0dtq.com/zhengning/7tian.html
 推荐查看天气：https://www.0dtq.com/zhengning/10tian.html
 推荐查看天气：https://www.0dtq.com/zhengning/15tian.html
 推荐查看天气：https://www.0dtq.com/zhengning/40tian.html
 推荐查看天气：https://www.0dtq.com/ningxian/
 推荐查看天气：https://www.0dtq.com/ningxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/ningxian/7tian.html
 推荐查看天气：https://www.0dtq.com/ningxian/10tian.html
 推荐查看天气：https://www.0dtq.com/ningxian/15tian.html
 推荐查看天气：https://www.0dtq.com/ningxian/40tian.html
 推荐查看天气：https://www.0dtq.com/zhenyuan/
 推荐查看天气：https://www.0dtq.com/zhenyuan/zuotian.html
 推荐查看天气：https://www.0dtq.com/zhenyuan/7tian.html
 推荐查看天气：https://www.0dtq.com/zhenyuan/10tian.html
 推荐查看天气：https://www.0dtq.com/zhenyuan/15tian.html
 推荐查看天气：https://www.0dtq.com/zhenyuan/40tian.html
 推荐查看天气：https://www.0dtq.com/dingxi/
 推荐查看天气：https://www.0dtq.com/dingxi/zuotian.html
 推荐查看天气：https://www.0dtq.com/dingxi/7tian.html
 推荐查看天气：https://www.0dtq.com/dingxi/10tian.html
 推荐查看天气：https://www.0dtq.com/dingxi/15tian.html
 推荐查看天气：https://www.0dtq.com/dingxi/40tian.html
 推荐查看天气：https://www.0dtq.com/anding/
 推荐查看天气：https://www.0dtq.com/anding/zuotian.html
 推荐查看天气：https://www.0dtq.com/anding/7tian.html
 推荐查看天气：https://www.0dtq.com/anding/10tian.html
 推荐查看天气：https://www.0dtq.com/anding/15tian.html
 推荐查看天气：https://www.0dtq.com/anding/40tian.html
 推荐查看天气：https://www.0dtq.com/tongwei/
 推荐查看天气：https://www.0dtq.com/tongwei/zuotian.html
 推荐查看天气：https://www.0dtq.com/tongwei/7tian.html
 推荐查看天气：https://www.0dtq.com/tongwei/10tian.html
 推荐查看天气：https://www.0dtq.com/tongwei/15tian.html
 推荐查看天气：https://www.0dtq.com/tongwei/40tian.html
 推荐查看天气：https://www.0dtq.com/longxi/
 推荐查看天气：https://www.0dtq.com/longxi/zuotian.html
 推荐查看天气：https://www.0dtq.com/longxi/7tian.html
 推荐查看天气：https://www.0dtq.com/longxi/10tian.html
 推荐查看天气：https://www.0dtq.com/longxi/15tian.html
 推荐查看天气：https://www.0dtq.com/longxi/40tian.html
 推荐查看天气：https://www.0dtq.com/weiyuan/
 推荐查看天气：https://www.0dtq.com/weiyuan/zuotian.html
 推荐查看天气：https://www.0dtq.com/weiyuan/7tian.html
 推荐查看天气：https://www.0dtq.com/weiyuan/10tian.html
 推荐查看天气：https://www.0dtq.com/weiyuan/15tian.html
 推荐查看天气：https://www.0dtq.com/weiyuan/40tian.html
 推荐查看天气：https://www.0dtq.com/lindao/
 推荐查看天气：https://www.0dtq.com/lindao/zuotian.html
 推荐查看天气：https://www.0dtq.com/lindao/7tian.html
 推荐查看天气：https://www.0dtq.com/lindao/10tian.html
 推荐查看天气：https://www.0dtq.com/lindao/15tian.html
 推荐查看天气：https://www.0dtq.com/lindao/40tian.html
 推荐查看天气：https://www.0dtq.com/zhangxian/
 推荐查看天气：https://www.0dtq.com/zhangxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/zhangxian/7tian.html
 推荐查看天气：https://www.0dtq.com/zhangxian/10tian.html
 推荐查看天气：https://www.0dtq.com/zhangxian/15tian.html
 推荐查看天气：https://www.0dtq.com/zhangxian/40tian.html
 推荐查看天气：https://www.0dtq.com/minxian/
 推荐查看天气：https://www.0dtq.com/minxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/minxian/7tian.html
 推荐查看天气：https://www.0dtq.com/minxian/10tian.html
 推荐查看天气：https://www.0dtq.com/minxian/15tian.html
 推荐查看天气：https://www.0dtq.com/minxian/40tian.html
 推荐查看天气：https://www.0dtq.com/longnan/
 推荐查看天气：https://www.0dtq.com/longnan/zuotian.html
 推荐查看天气：https://www.0dtq.com/longnan/7tian.html
 推荐查看天气：https://www.0dtq.com/longnan/10tian.html
 推荐查看天气：https://www.0dtq.com/longnan/15tian.html
 推荐查看天气：https://www.0dtq.com/longnan/40tian.html
 推荐查看天气：https://www.0dtq.com/wudu/
 推荐查看天气：https://www.0dtq.com/wudu/zuotian.html
 推荐查看天气：https://www.0dtq.com/wudu/7tian.html
 推荐查看天气：https://www.0dtq.com/wudu/10tian.html
 推荐查看天气：https://www.0dtq.com/wudu/15tian.html
 推荐查看天气：https://www.0dtq.com/wudu/40tian.html
 推荐查看天气：https://www.0dtq.com/chengxian/
 推荐查看天气：https://www.0dtq.com/chengxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/chengxian/7tian.html
 推荐查看天气：https://www.0dtq.com/chengxian/10tian.html
 推荐查看天气：https://www.0dtq.com/chengxian/15tian.html
 推荐查看天气：https://www.0dtq.com/chengxian/40tian.html
 推荐查看天气：https://www.0dtq.com/wenxian/
 推荐查看天气：https://www.0dtq.com/wenxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/wenxian/7tian.html
 推荐查看天气：https://www.0dtq.com/wenxian/10tian.html
 推荐查看天气：https://www.0dtq.com/wenxian/15tian.html
 推荐查看天气：https://www.0dtq.com/wenxian/40tian.html
 推荐查看天气：https://www.0dtq.com/dangchang/
 推荐查看天气：https://www.0dtq.com/dangchang/zuotian.html
 推荐查看天气：https://www.0dtq.com/dangchang/7tian.html
 推荐查看天气：https://www.0dtq.com/dangchang/10tian.html
 推荐查看天气：https://www.0dtq.com/dangchang/15tian.html
 推荐查看天气：https://www.0dtq.com/dangchang/40tian.html
 推荐查看天气：https://www.0dtq.com/kangxian/
 推荐查看天气：https://www.0dtq.com/kangxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/kangxian/7tian.html
 推荐查看天气：https://www.0dtq.com/kangxian/10tian.html
 推荐查看天气：https://www.0dtq.com/kangxian/15tian.html
 推荐查看天气：https://www.0dtq.com/kangxian/40tian.html
 推荐查看天气：https://www.0dtq.com/xihe/
 推荐查看天气：https://www.0dtq.com/xihe/zuotian.html
 推荐查看天气：https://www.0dtq.com/xihe/7tian.html
 推荐查看天气：https://www.0dtq.com/xihe/10tian.html
 推荐查看天气：https://www.0dtq.com/xihe/15tian.html
 推荐查看天气：https://www.0dtq.com/xihe/40tian.html
 推荐查看天气：https://www.0dtq.com/lixian/
 推荐查看天气：https://www.0dtq.com/lixian/zuotian.html
 推荐查看天气：https://www.0dtq.com/lixian/7tian.html
 推荐查看天气：https://www.0dtq.com/lixian/10tian.html
 推荐查看天气：https://www.0dtq.com/lixian/15tian.html
 推荐查看天气：https://www.0dtq.com/lixian/40tian.html
 推荐查看天气：https://www.0dtq.com/huixian/
 推荐查看天气：https://www.0dtq.com/huixian/zuotian.html
 推荐查看天气：https://www.0dtq.com/huixian/7tian.html
 推荐查看天气：https://www.0dtq.com/huixian/10tian.html
 推荐查看天气：https://www.0dtq.com/huixian/15tian.html
 推荐查看天气：https://www.0dtq.com/huixian/40tian.html
 推荐查看天气：https://www.0dtq.com/liangdang/
 推荐查看天气：https://www.0dtq.com/liangdang/zuotian.html
 推荐查看天气：https://www.0dtq.com/liangdang/7tian.html

在 React 函数组件里用 useEffect 处理定时器、事件订阅或者异步请求时，经常会遇到一个隐蔽的问题：回调函数里拿到的 state 或 props 永远是初始值，而不是最新的值。比如一个计数器每秒加一，但定时器里 count 始终是 0；或者一个搜索框，输入变化后发请求，但拿到的一直是第一次的输入。这类问题通常被叫做“闭包陷阱”或“陈旧闭包”，根源在于每次渲染都有独立的函数作用域和 state 快照，而 useEffect 只会在依赖数组变化时重新执行。如果依赖数组为空，effect 只在挂载时运行一次，它捕获的便是首次渲染的闭包。文章会从实际代码出发，分析几种常见的触发场景，并给出不用滥用 useRef、也能正确处理依赖的写法，包括函数式更新、正确声明依赖以及清理副作用的时机。

React 中 useEffect 依赖数组的闭包陷阱：为什么你的定时器总在读取旧值？

在 React 函数组件里用 useEffect 处理定时器、事件订阅或者异步请求时，经常会遇到一个隐蔽的问题：回调函数里拿到的 state 或 props 永远是初始值，而不是最新的值。比如一个计数器每秒加一，但定时器里 count 始终是 0；或者一个搜索框，输入变化后发请求，但拿到的一直是第一次的输入。这类问题通常被叫做“闭包陷阱”或“陈旧闭包”，根源在于每次渲染都有独立的函数作用域和 st

数据库

React useEffect闭包陷阱深度解析：定时器、事件订阅和异步请求中常遇陈旧闭包问题，导致state或props永远为初始值。通过函数式更新、正确声明依赖数组和清理副作用时机，可有效解决。避免滥用useRef，善用exhaustive-deps规则，确保effect自洽，提升React组件性能与稳定性。

代码解释

数据流

ReAct 

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

React 中 useEffect 依赖数组的闭包陷阱：为什么你的定时器总在读取旧值？-腾讯云开发者社区-腾讯云

React 中 useEffect 依赖数组的闭包陷阱：为什么你的定时器总在读取旧值？

React 中 useEffect 依赖数组的闭包陷阱：为什么你的定时器总在读取旧值？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐