React JS中组件卸载时如何正确移除事件监听器？

架构老林

2026-11-3

核心问题本质

你当前遇到的后台持续跑日志的问题，不是简单的事件监听器没移除干净，而是三个并行的逻辑漏洞：

第一，setInterval创建的定时器是独立于事件监听器的执行单元，一旦被启动，不管对应的事件监听器有没有被移除，它都会按固定周期执行，根本不会随组件卸载自动停止
第二，你写的removeEventListener其实大概率根本没生效——因为组件每次渲染都会重新生成handleSlide函数的引用，addEventListener和removeEventListener必须传入完全相同的函数引用才能成功移除监听，传两次不同的函数，哪怕逻辑一模一样也删不掉之前的监听
额外的逻辑错位：你想让逻辑在组件挂载时触发，却把它绑在window.load事件上，如果组件是在页面完全加载后才被挂载的，load事件早就触发完了，你的handleSlide根本不会执行，和预期完全不符

正确的实现方案

需要做到三个关键点，才能保证组件卸载时所有后台逻辑完全停止：

把setInterval返回的定时器ID存在useRef中，方便后续精准定位清除
把组件卸载时需要执行的清理逻辑全部放在useEffect的返回函数中，React会在组件销毁时自动执行这段清理
清理函数中要依次做两件事：清除存好的定时器实例、用稳定的函数引用移除对应绑定的事件（如果确实需要绑load事件的话）

修正后的可运行代码示例：

import { useEffect, useRef } from 'react';

function SlideComponent() {
  // 持久存储定时器ID，避免闭包捕获到旧的定时器引用
  const timerRef = useRef(null);

  // 把回调函数提取成稳定引用，保证add和remove的时候是同一个函数
  const handleSlide = () => {
    // 启动前先清掉旧定时器，避免重复启动造成多个定时器并行
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }
    timerRef.current = setInterval(() => {
      console.log('runs');
    }, 2000);
  };

  useEffect(() => {
    // 按你原本的逻辑绑定load事件
    window.addEventListener('load', handleSlide);
    // 适配组件晚加载的场景：如果组件挂载时页面已经加载完成，直接执行一次逻辑
    if (document.readyState === 'complete') {
      handleSlide();
    }

    // 组件卸载时的统一清理逻辑
    return () => {
      // 先清定时器，阻止后台无限执行
      if (timerRef.current) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
      // 用同一个稳定引用移除事件监听，保证移除生效
      window.removeEventListener('load', handleSlide);
    };
  }, []);

  return <div>组件内容</div>;
}

补充注意点：所有在组件里创建的有独立生命周期的逻辑（包括定时器、全局事件监听、未完成的接口请求、第三方实例绑定），都不能只靠移除事件监听器来停止，必须在卸载清理函数中单独处理，不然就会出现组件切走了，后台逻辑还在跑的内存泄漏问题。

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