很多人第一次写 `useEffect` 时都会默认“依赖数组就是告诉 React 什么时候重新执行副作用”。这个理解在简单场景下能用，但一旦涉及对象、函数、闭包和并发渲染，就会开始出现奇怪的 bug：明明依赖没变，副作用却跑了；或者依赖变了，副作用却拿不到最新值。问题的核心在于 React 并不比较依赖的“语义”，它只做 `Object.is` 比较，而且每次渲染都会重新创建函数和对象。这篇文章会从一次实际遇到的轮询请求失效问题出发，解释依赖数组的真实比较机制、闭包陷阱、函数依赖的稳定化手段，以及 `useEffect` 在严格模式和并发特性下的行为差异。

先看一段常见的轮询代码。组件挂载后每隔 5 秒请求一次接口，同时依赖一个 `status` 状态：

```jsx
function Polling({ status }) {
 useEffect(() => {
 const timer = setInterval(() => {
 fetch(`/api/data?status=${status}`);
 }, 5000);
 return () => clearInterval(timer);
 }, [status]);

 return <div>Polling for {status}</div>;
}
```

这段代码本身没问题，`status` 变化时定时器会重建。但如果把 `status` 换成一个对象，比如 `filters`：

```jsx
function List({ filters }) {
 useEffect(() => {
 fetch('/api/list', {
 method: 'POST',
 body: JSON.stringify(filters),
 });
 }, [filters]);

 return <div>List</div>;
}
```

父组件每次渲染都传一个新的 `{ page: 1, keyword: '' }`，即使值完全一样，`filters` 的引用也变了。`useEffect` 会认为依赖变化，重新请求。请求频率完全失控。

React 对依赖数组的处理很直接：上一次渲染的依赖值和本次渲染的依赖值逐个用 `Object.is` 比较。只要有一项不相等，就执行清理函数，然后重新运行副作用。它不关心对象内容是否相同，也不关心函数逻辑是否一致。

对象的稳定化通常有三种做法：把对象拆成原始值依赖、在父组件用 `useMemo` 缓存对象、或者在子组件里用 `useRef` 保存上一次的值做深比较。但更推荐把依赖拆成原始值：

```jsx
useEffect(() => {
 fetch('/api/list', {
 method: 'POST',
 body: JSON.stringify({ page, keyword }),
 });
}, [page, keyword]);
```

这样依赖明确，也不会因为父组件每次新建对象而反复触发。

函数依赖是另一个高频雷区。比如：

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

 const handleClick = () => {
 setCount(count + 1);
 };

 return <Child onClick={handleClick} />;
}

function Child({ onClick }) {
 useEffect(() => {
 onClick();
 }, [onClick]);

 return <button onClick={onClick}>click</button>;
}
```

`handleClick` 每次渲染都会新建，`Child` 的副作用每次都会跑。如果 `onClick` 里还引用了 `count`，并且依赖数组写成 `[]`，那就会拿到初始的 `count`，出现闭包陷阱。

处理函数依赖有几种实际可用的策略。如果副作用只是订阅事件，可以把函数放进 `useRef`，避免把它作为依赖：

```jsx
function Child({ onClick }) {
 const onClickRef = useRef(onClick);
 onClickRef.current = onClick;

 useEffect(() => {
 const handler = () => onClickRef.current();
 window.addEventListener('click', handler);
 return () => window.removeEventListener('click', handler);
 }, []);

 return null;
}
```

如果函数本身是纯逻辑且不依赖组件状态，可以提到组件外部。如果必须依赖状态，就用 `useCallback` 配合正确的依赖数组：

```jsx
const handleClick = useCallback(() => {
 setCount((c) => c + 1);
}, []);
```

这里使用了函数式更新，所以 `useCallback` 的依赖数组可以是空的。

`useEffect` 在开发环境的 StrictMode 下会执行两次：挂载、卸载、再挂载。这不是 bug，而是故意暴露副作用没有正确清理的问题。如果副作用里创建了连接、定时器、订阅，却没有清理函数，开发环境就会出现重复请求或重复绑定。生产环境不会这样，但代码本身应该具备幂等性。

还有一个容易被忽略的点：`useEffect` 的清理函数并不是在组件卸载时才执行，而是在下一次副作用执行之前也会执行。所以下面这种写法是安全的：

```jsx
useEffect(() => {
 let cancelled = false;
 fetch('/api/data').then((res) => {
 if (!cancelled) setData(res);
 });
 return () => {
 cancelled = true;
 };
}, []);
```

每次依赖变化或组件卸载，都会把上一次的请求标记为取消，避免竞态导致旧数据覆盖新数据。

React 18 的并发特性下，`useEffect` 可能会被中断和重新执行。虽然副作用本身仍然是在提交阶段同步执行，但组件函数体可能被多次调用。这意味着不要在组件函数体里写副作用，比如直接发请求或修改 DOM。所有副作用都应该放在 `useEffect` 或事件处理函数里。

依赖数组的 lint 规则经常被人抱怨，但 `exhaustive-deps` 确实能帮你发现隐藏的闭包问题。如果某个依赖你不想加，通常意味着代码结构需要调整，而不是简单地禁用规则。把逻辑拆到自定义 Hook 里，或者用 `useRef` 保存最新值，往往比忽略警告更安全。

最后提一个实际场景：分页列表里用 `useEffect` 监听 `page` 变化去请求数据，同时请求参数里还有 `pageSize` 和 `keyword`。如果只写 `[page]`，那么 `pageSize` 或 `keyword` 变化时列表不会刷新。很多人会因此改成 `[page, pageSize, keyword]`，但 `keyword` 如果是个对象，又会回到前面说的引用问题。把 `keyword` 拆成字符串，或者用 `JSON.stringify` 后的值作为依赖，都是可行的临时手段。更彻底的做法是使用 `useReducer` 管理查询条件，把整个查询对象作为一个 state 更新，这样依赖数组只需要写这个 state，且它的引用只在真正更新时变化。

依赖数组不是声明式的“监听”，它只是告诉 React 每次渲染后要不要重新执行副作用。理解这一点之后，很多反直觉的行为都能得到解释。

 推荐查看天气：https://www.0dtq.com/helingeer/
 推荐查看天气：https://www.0dtq.com/helingeer/zuotian.html
 推荐查看天气：https://www.0dtq.com/helingeer/7tian.html
 推荐查看天气：https://www.0dtq.com/helingeer/10tian.html
 推荐查看天气：https://www.0dtq.com/helingeer/15tian.html
 推荐查看天气：https://www.0dtq.com/helingeer/40tian.html
 推荐查看天气：https://www.0dtq.com/qingshuihe/
 推荐查看天气：https://www.0dtq.com/qingshuihe/zuotian.html
 推荐查看天气：https://www.0dtq.com/qingshuihe/7tian.html
 推荐查看天气：https://www.0dtq.com/qingshuihe/10tian.html
 推荐查看天气：https://www.0dtq.com/qingshuihe/15tian.html
 推荐查看天气：https://www.0dtq.com/qingshuihe/40tian.html
 推荐查看天气：https://www.0dtq.com/huhehaotewuchuan/
 推荐查看天气：https://www.0dtq.com/huhehaotewuchuan/zuotian.html
 推荐查看天气：https://www.0dtq.com/huhehaotewuchuan/7tian.html
 推荐查看天气：https://www.0dtq.com/huhehaotewuchuan/10tian.html
 推荐查看天气：https://www.0dtq.com/huhehaotewuchuan/15tian.html
 推荐查看天气：https://www.0dtq.com/huhehaotewuchuan/40tian.html
 推荐查看天气：https://www.0dtq.com/baotou/
 推荐查看天气：https://www.0dtq.com/baotou/zuotian.html
 推荐查看天气：https://www.0dtq.com/baotou/7tian.html
 推荐查看天气：https://www.0dtq.com/baotou/10tian.html
 推荐查看天气：https://www.0dtq.com/baotou/15tian.html
 推荐查看天气：https://www.0dtq.com/baotou/40tian.html
 推荐查看天气：https://www.0dtq.com/donghe/
 推荐查看天气：https://www.0dtq.com/donghe/zuotian.html
 推荐查看天气：https://www.0dtq.com/donghe/7tian.html
 推荐查看天气：https://www.0dtq.com/donghe/10tian.html
 推荐查看天气：https://www.0dtq.com/donghe/15tian.html
 推荐查看天气：https://www.0dtq.com/donghe/40tian.html
 推荐查看天气：https://www.0dtq.com/shiguai/
 推荐查看天气：https://www.0dtq.com/shiguai/zuotian.html
 推荐查看天气：https://www.0dtq.com/shiguai/7tian.html
 推荐查看天气：https://www.0dtq.com/shiguai/10tian.html
 推荐查看天气：https://www.0dtq.com/shiguai/15tian.html
 推荐查看天气：https://www.0dtq.com/shiguai/40tian.html
 推荐查看天气：https://www.0dtq.com/baiyunkuangqu/
 推荐查看天气：https://www.0dtq.com/baiyunkuangqu/zuotian.html
 推荐查看天气：https://www.0dtq.com/baiyunkuangqu/7tian.html
 推荐查看天气：https://www.0dtq.com/baiyunkuangqu/10tian.html
 推荐查看天气：https://www.0dtq.com/baiyunkuangqu/15tian.html
 推荐查看天气：https://www.0dtq.com/baiyunkuangqu/40tian.html
 推荐查看天气：https://www.0dtq.com/jiuyuan/
 推荐查看天气：https://www.0dtq.com/jiuyuan/zuotian.html
 推荐查看天气：https://www.0dtq.com/jiuyuan/7tian.html
 推荐查看天气：https://www.0dtq.com/jiuyuan/10tian.html
 推荐查看天气：https://www.0dtq.com/jiuyuan/15tian.html
 推荐查看天气：https://www.0dtq.com/jiuyuan/40tian.html
 推荐查看天气：https://www.0dtq.com/tumoteyouqi/
 推荐查看天气：https://www.0dtq.com/tumoteyouqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/tumoteyouqi/7tian.html
 推荐查看天气：https://www.0dtq.com/tumoteyouqi/10tian.html
 推荐查看天气：https://www.0dtq.com/tumoteyouqi/15tian.html
 推荐查看天气：https://www.0dtq.com/tumoteyouqi/40tian.html
 推荐查看天气：https://www.0dtq.com/guyang/
 推荐查看天气：https://www.0dtq.com/guyang/zuotian.html
 推荐查看天气：https://www.0dtq.com/guyang/7tian.html
 推荐查看天气：https://www.0dtq.com/guyang/10tian.html
 推荐查看天气：https://www.0dtq.com/guyang/15tian.html
 推荐查看天气：https://www.0dtq.com/guyang/40tian.html
 推荐查看天气：https://www.0dtq.com/damaoqi/
 推荐查看天气：https://www.0dtq.com/damaoqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/damaoqi/7tian.html
 推荐查看天气：https://www.0dtq.com/damaoqi/10tian.html
 推荐查看天气：https://www.0dtq.com/damaoqi/15tian.html
 推荐查看天气：https://www.0dtq.com/damaoqi/40tian.html
 推荐查看天气：https://www.0dtq.com/wuhai/
 推荐查看天气：https://www.0dtq.com/wuhai/zuotian.html
 推荐查看天气：https://www.0dtq.com/wuhai/7tian.html
 推荐查看天气：https://www.0dtq.com/wuhai/10tian.html
 推荐查看天气：https://www.0dtq.com/wuhai/15tian.html
 推荐查看天气：https://www.0dtq.com/wuhai/40tian.html
 推荐查看天气：https://www.0dtq.com/haibowan/
 推荐查看天气：https://www.0dtq.com/haibowan/zuotian.html
 推荐查看天气：https://www.0dtq.com/haibowan/7tian.html
 推荐查看天气：https://www.0dtq.com/haibowan/10tian.html
 推荐查看天气：https://www.0dtq.com/haibowan/15tian.html
 推荐查看天气：https://www.0dtq.com/haibowan/40tian.html
 推荐查看天气：https://www.0dtq.com/wuda/
 推荐查看天气：https://www.0dtq.com/wuda/zuotian.html
 推荐查看天气：https://www.0dtq.com/wuda/7tian.html
 推荐查看天气：https://www.0dtq.com/wuda/10tian.html
 推荐查看天气：https://www.0dtq.com/wuda/15tian.html
 推荐查看天气：https://www.0dtq.com/wuda/40tian.html
 推荐查看天气：https://www.0dtq.com/chifeng/
 推荐查看天气：https://www.0dtq.com/chifeng/zuotian.html
 推荐查看天气：https://www.0dtq.com/chifeng/7tian.html
 推荐查看天气：https://www.0dtq.com/chifeng/10tian.html
 推荐查看天气：https://www.0dtq.com/chifeng/15tian.html
 推荐查看天气：https://www.0dtq.com/chifeng/40tian.html
 推荐查看天气：https://www.0dtq.com/yuanbaoshan/
 推荐查看天气：https://www.0dtq.com/yuanbaoshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/yuanbaoshan/7tian.html
 推荐查看天气：https://www.0dtq.com/yuanbaoshan/10tian.html
 推荐查看天气：https://www.0dtq.com/yuanbaoshan/15tian.html
 推荐查看天气：https://www.0dtq.com/yuanbaoshan/40tian.html
 推荐查看天气：https://www.0dtq.com/songshan/
 推荐查看天气：https://www.0dtq.com/songshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/songshan/7tian.html
 推荐查看天气：https://www.0dtq.com/songshan/10tian.html
 推荐查看天气：https://www.0dtq.com/songshan/15tian.html
 推荐查看天气：https://www.0dtq.com/songshan/40tian.html
 推荐查看天气：https://www.0dtq.com/alukeerqinqi/
 推荐查看天气：https://www.0dtq.com/alukeerqinqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/alukeerqinqi/7tian.html
 推荐查看天气：https://www.0dtq.com/alukeerqinqi/10tian.html
 推荐查看天气：https://www.0dtq.com/alukeerqinqi/15tian.html
 推荐查看天气：https://www.0dtq.com/alukeerqinqi/40tian.html
 推荐查看天气：https://www.0dtq.com/balinzuoqi/
 推荐查看天气：https://www.0dtq.com/balinzuoqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/balinzuoqi/7tian.html
 推荐查看天气：https://www.0dtq.com/balinzuoqi/10tian.html
 推荐查看天气：https://www.0dtq.com/balinzuoqi/15tian.html
 推荐查看天气：https://www.0dtq.com/balinzuoqi/40tian.html
 推荐查看天气：https://www.0dtq.com/balinyouqi/
 推荐查看天气：https://www.0dtq.com/balinyouqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/balinyouqi/7tian.html
 推荐查看天气：https://www.0dtq.com/balinyouqi/10tian.html
 推荐查看天气：https://www.0dtq.com/balinyouqi/15tian.html
 推荐查看天气：https://www.0dtq.com/balinyouqi/40tian.html
 推荐查看天气：https://www.0dtq.com/linxi/
 推荐查看天气：https://www.0dtq.com/linxi/zuotian.html
 推荐查看天气：https://www.0dtq.com/linxi/7tian.html
 推荐查看天气：https://www.0dtq.com/linxi/10tian.html
 推荐查看天气：https://www.0dtq.com/linxi/15tian.html
 推荐查看天气：https://www.0dtq.com/linxi/40tian.html
 推荐查看天气：https://www.0dtq.com/keshiketengqi/
 推荐查看天气：https://www.0dtq.com/keshiketengqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/keshiketengqi/7tian.html
 推荐查看天气：https://www.0dtq.com/keshiketengqi/10tian.html
 推荐查看天气：https://www.0dtq.com/keshiketengqi/15tian.html
 推荐查看天气：https://www.0dtq.com/keshiketengqi/40tian.html
 推荐查看天气：https://www.0dtq.com/wengniuteqi/
 推荐查看天气：https://www.0dtq.com/wengniuteqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/wengniuteqi/7tian.html
 推荐查看天气：https://www.0dtq.com/wengniuteqi/10tian.html
 推荐查看天气：https://www.0dtq.com/wengniuteqi/15tian.html
 推荐查看天气：https://www.0dtq.com/wengniuteqi/40tian.html
 推荐查看天气：https://www.0dtq.com/kalaqinqi/
 推荐查看天气：https://www.0dtq.com/kalaqinqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/kalaqinqi/7tian.html
 推荐查看天气：https://www.0dtq.com/kalaqinqi/10tian.html
 推荐查看天气：https://www.0dtq.com/kalaqinqi/15tian.html
 推荐查看天气：https://www.0dtq.com/kalaqinqi/40tian.html
 推荐查看天气：https://www.0dtq.com/ningcheng/
 推荐查看天气：https://www.0dtq.com/ningcheng/zuotian.html
 推荐查看天气：https://www.0dtq.com/ningcheng/7tian.html
 推荐查看天气：https://www.0dtq.com/ningcheng/10tian.html
 推荐查看天气：https://www.0dtq.com/ningcheng/15tian.html
 推荐查看天气：https://www.0dtq.com/ningcheng/40tian.html
 推荐查看天气：https://www.0dtq.com/aohanqi/
 推荐查看天气：https://www.0dtq.com/aohanqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/aohanqi/7tian.html
 推荐查看天气：https://www.0dtq.com/aohanqi/10tian.html
 推荐查看天气：https://www.0dtq.com/aohanqi/15tian.html
 推荐查看天气：https://www.0dtq.com/aohanqi/40tian.html
 推荐查看天气：https://www.0dtq.com/tongliao/
 推荐查看天气：https://www.0dtq.com/tongliao/zuotian.html
 推荐查看天气：https://www.0dtq.com/tongliao/7tian.html
 推荐查看天气：https://www.0dtq.com/tongliao/10tian.html
 推荐查看天气：https://www.0dtq.com/tongliao/15tian.html
 推荐查看天气：https://www.0dtq.com/tongliao/40tian.html
 推荐查看天气：https://www.0dtq.com/keerqin/
 推荐查看天气：https://www.0dtq.com/keerqin/zuotian.html
 推荐查看天气：https://www.0dtq.com/keerqin/7tian.html
 推荐查看天气：https://www.0dtq.com/keerqin/10tian.html
 推荐查看天气：https://www.0dtq.com/keerqin/15tian.html
 推荐查看天气：https://www.0dtq.com/keerqin/40tian.html
 推荐查看天气：https://www.0dtq.com/kezuozhongqi/
 推荐查看天气：https://www.0dtq.com/kezuozhongqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/kezuozhongqi/7tian.html
 推荐查看天气：https://www.0dtq.com/kezuozhongqi/10tian.html
 推荐查看天气：https://www.0dtq.com/kezuozhongqi/15tian.html
 推荐查看天气：https://www.0dtq.com/kezuozhongqi/40tian.html
 推荐查看天气：https://www.0dtq.com/keerqinzuoyihouqi/
 推荐查看天气：https://www.0dtq.com/keerqinzuoyihouqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/keerqinzuoyihouqi/7tian.html
 推荐查看天气：https://www.0dtq.com/keerqinzuoyihouqi/10tian.html
 推荐查看天气：https://www.0dtq.com/keerqinzuoyihouqi/15tian.html
 推荐查看天气：https://www.0dtq.com/keerqinzuoyihouqi/40tian.html
 推荐查看天气：https://www.0dtq.com/kailu/
 推荐查看天气：https://www.0dtq.com/kailu/zuotian.html
 推荐查看天气：https://www.0dtq.com/kailu/7tian.html
 推荐查看天气：https://www.0dtq.com/kailu/10tian.html
 推荐查看天气：https://www.0dtq.com/kailu/15tian.html
 推荐查看天气：https://www.0dtq.com/kailu/40tian.html
 推荐查看天气：https://www.0dtq.com/kulunqi/
 推荐查看天气：https://www.0dtq.com/kulunqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/kulunqi/7tian.html
 推荐查看天气：https://www.0dtq.com/kulunqi/10tian.html
 推荐查看天气：https://www.0dtq.com/kulunqi/15tian.html
 推荐查看天气：https://www.0dtq.com/kulunqi/40tian.html
 推荐查看天气：https://www.0dtq.com/naimanqi/
 推荐查看天气：https://www.0dtq.com/naimanqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/naimanqi/7tian.html
 推荐查看天气：https://www.0dtq.com/naimanqi/10tian.html
 推荐查看天气：https://www.0dtq.com/naimanqi/15tian.html
 推荐查看天气：https://www.0dtq.com/naimanqi/40tian.html
 推荐查看天气：https://www.0dtq.com/zhaluteqi/
 推荐查看天气：https://www.0dtq.com/zhaluteqi/zuotian.html

很多人第一次写 useEffect 时都会默认“依赖数组就是告诉 React 什么时候重新执行副作用”。这个理解在简单场景下能用，但一旦涉及对象、函数、闭包和并发渲染，就会开始出现奇怪的 bug：明明依赖没变，副作用却跑了；或者依赖变了，副作用却拿不到最新值。问题的核心在于 React 并不比较依赖的“语义”，它只做 Object.is 比较，而且每次渲染都会重新创建函数和对象。这篇文章会从一次实际遇到的轮询请求失效问题出发，解释依赖数组的真实比较机制、闭包陷阱、函数依赖的稳定化手段，以及 useEffect 在严格模式和并发特性下的行为差异。

React 中 useEffect 依赖数组的三种谎言与真实运行逻辑

很多人第一次写 useEffect 时都会默认“依赖数组就是告诉 React 什么时候重新执行副作用”。这个理解在简单场景下能用，但一旦涉及对象、函数、闭包和并发渲染，就会开始出现奇怪的 bug：明明依赖没变，副作用却跑了；或者依赖变了，副作用却拿不到最新值。问题的核心在于 React 并不比较依赖的“语义”，它只做 Object.is 比较，而且每次渲染都会重新创建函数和对象。这篇文章会从一次实

编程语言

useEffect依赖数组用Object.is比较引用，对象或函数每次渲染新建会触发重复执行，闭包导致拿不到最新值。解决方式包括拆分为原始值依赖、useCallback稳定函数、useRef保存最新回调，配合严格模式和清理函数处理竞态，确保副作用幂等性。

代码解释

ReAct 

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

React 中 useEffect 依赖数组的三种谎言与真实运行逻辑-腾讯云开发者社区-腾讯云

React 中 useEffect 依赖数组的三种谎言与真实运行逻辑

React 中 useEffect 依赖数组的三种谎言与真实运行逻辑

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐