当前位置：首页 > 文章列表 > 文章 > 前端 > React 定时器为什么越开越多：useEffect 清理怎么写

React 定时器为什么越开越多：useEffect 清理怎么写

来源：17golang原创 2026-09-06 02:03:09 0浏览收藏

React 页面里的数字越跳越快、轮询请求越来越密，通常不是 setInterval 自己变快了，而是同一个组件反复创建了多个定时器。最常见的原因是把 setInterval 放进 useEffect 后没有在返回函数里调用 clearInterval，或者依赖数组变化时创建了新定时器，却没有撤掉旧的。

修复原则很简单：每次 Effect setup 创建一个定时器，就必须在同一个 Effect 的 cleanup 中清掉它；依赖数组只写真正参与副作用的响应式值，计数器更新优先使用函数式写法。

要点速览

useEffect 依赖变化前会先执行旧 cleanup，再执行新 setup。
setInterval 对应 clearInterval，不要只清理组件状态。
Strict Mode 开发检查出现两次日志并不等于生产创建两个定时器；没有对称 cleanup 才是真问题。

先确认：变快的是回调，还是定时器数量

排查时先给每个定时器记录一个本地 ID，并同时记录 setup 和 cleanup。不要只看页面上的数字，因为一次回调里如果更新了同一个状态，视觉上很难判断到底是间隔变短还是回调叠加。

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const timerId = window.setInterval(() => {
      // 使用函数式更新，读取更新前的最新值，避免依赖旧闭包。
      setCount(current => current + 1);
    }, 1000);

    console.log('创建定时器', timerId);

    return () => {
      // cleanup 必须清掉本次 setup 创建的同一个定时器。
      window.clearInterval(timerId);
      console.log('清理定时器', timerId);
    };
  }, []);

  return 刷新次数：{count};
}

如果日志里出现多个“创建定时器”，却没有数量相同的“清理定时器”，问题就在 Effect 生命周期，而不是计时精度。上图把组件、Effect、浏览器定时器和 cleanup 的边界放在一起，便于先找出缺口。

React useEffect 定时器清理关系图，展示组件渲染、Effect setup、setInterval、依赖数组和 cleanup 的静态边界 — 图1：查看 React 组件、useEffect setup、setInterval 与 cleanup 的静态关系；每个定时器资源都应有对应的 clearInterval。

把 setup 和 cleanup 写成一对

React 文档把 Effect 描述为与外部系统同步的过程，浏览器定时器正是外部系统。组件首次提交后执行 setup；依赖发生变化时，React 先用旧值运行 cleanup，再用新值运行 setup；组件从 DOM 移除时还会执行最后一次 cleanup。因此，清理函数不是“组件销毁时的可选优化”，而是定时器副作用的一半。

下面这个写法的问题在于每次 Effect 运行都新增一个 interval，却没有保存并释放它：

useEffect(() => {
  // 错误：每次 Effect 运行都会再创建一个定时器。
  window.setInterval(() => {
    setCount(current => current + 1);
  }, 1000);
});

即使暂时把依赖数组改成空数组，也不能替代 cleanup：组件被隐藏、卸载或重新挂载时，旧资源仍可能存活。正确做法是让创建和销毁靠近书写，并使用同一个 ID：

useEffect(() => {
  const timerId = window.setInterval(() => {
    // 函数式更新不要求把 count 放进依赖数组。
    setCount(current => current + 1);
  }, 1000);

  return () => {
    // 只清理本次 setup 创建的资源。
    window.clearInterval(timerId);
  };
}, []);

依赖数组变化时，先清旧定时器

如果间隔时间或订阅对象由 props、state 决定，就应把它们写入依赖数组。例如定时刷新间隔来自 delay：

function PollingCounter({ delay }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timerId = window.setInterval(() => {
      // 让每次 tick 基于最新状态计算，不依赖旧 count。
      setCount(current => current + 1);
    }, delay);

    return () => {
      // delay 改变前先释放旧 interval，避免两个频率同时运行。
      window.clearInterval(timerId);
    };
  }, [delay]);

  return 刷新次数：{count};
}

这里不能为了“只运行一次”而强行写成空数组。Effect 使用了响应式值 delay，就要声明它；否则代码表达的是“永远使用第一次的间隔”，而不是“跟随当前间隔同步”。同时，setCount(current => current + 1) 让计时回调不必依赖当前的 count，可以避免因每次计数都重建定时器。

现象	优先检查	修复方向
每秒增加多次	setup 次数是否多于 cleanup	保存 timerId 并调用 clearInterval
修改间隔后越来越快	delay 是否触发 Effect 重跑	依赖 delay，同时清理旧定时器
日志显示两次创建	是否开启开发 Strict Mode	确保 setup 与 cleanup 对称，不要用标志位掩盖问题