React组件卸载时如何正确清除递归setTimeout定时器

数据老陈

2026-8-30

问题原因

你的清理逻辑不生效核心是几个写法错误：

调用clearTimeout()时没有传入目标定时器的ID：clearTimeout必须接收setTimeout返回的唯一数字ID才能定位到要清除的定时器，无参调用不会清除任何已注册的定时任务。
没有保存递归过程中不断生成的新定时器ID：每次接口返回空数组触发下一轮轮询时，都会创建一个全新的setTimeout实例，对应新的ID，你没有把这个动态变化的ID持久化存储，卸载时自然找不到要清除的目标。
额外说明：浏览器环境下window.clearTimeout和全局作用域的clearTimeout是完全相同的方法，不需要重复调用，前端业务代码里直接调用clearTimeout即可，global.clearTimeout是Node.js环境的写法，浏览器中执行不会生效。

修复实现

核心是用useRef跨渲染周期保存最新的定时器ID，同时增加卸载标记避免组件卸载后接口返回触发无效的状态更新，代码如下：

import { useEffect, useRef } from 'react';

// 组件内声明ref
const timerRef = useRef(null);
const isUnmountedRef = useRef(false);

useEffect(() => {
  isUnmountedRef.current = false;
  getItems(params);

  return () => {
    isUnmountedRef.current = true;
    // 传入存储的定时器ID完成清除
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }
}, [params]);

const getItems = async (params) => {
  try {
    const { data = [] } = await axios.get('/some-endpoint', params);
    // 组件已卸载直接终止后续逻辑
    if (isUnmountedRef.current) return;

    dispatch({ type: ITEMS_START });
    if (data.length === 0) {
      // 每次创建新定时器时，把返回的ID存到ref中
      timerRef.current = setTimeout(() => {
        getItems(params);
      }, 5000);
    } else {
      dispatch({ type: ITEMS_SUCCESS, payload: { data } });
    }
  } catch (error) {
    if (isUnmountedRef.current) return;
    dispatch({ type: ITEMS_ERROR, payload: error });
  }
}

注意事项

不要用组件内的普通变量存储定时器ID：普通变量会在组件重渲染时被重置，无法稳定保留最新的定时器ID，useRef保存的内容不会随重渲染重置，适合存储这类跨生命周期需要访问的可变值。
增加卸载标记是为了规避内存泄漏警告：如果组件卸载时刚好有 pending 状态的接口请求，请求返回后触发dispatch更新已卸载组件的状态，React会抛出内存泄漏警告，增加判断可以完全避免这个问题。
如果params是动态变化的值，一定要加到useEffect的依赖数组中，否则轮询请求会一直拿闭包缓存的旧参数发起调用，不符合业务预期。

内容的提问来源于stack exchange，提问作者ryoshpa