React中window.removeEventListener失效及beforeunload事件类型咨询

数据老陈

2026-8-18

问题解决与类型说明

一、移除监听无效的原因及修复

问题核心在于handleBrowserCloseReload函数的引用一致性：它每次组件渲染都会生成新的函数实例，导致调用removeEventListener时，传入的函数和之前绑定的不是同一个引用，监听自然无法被正确移除。

提供两种可行修复方案：

方案1：用`useCallback`缓存函数引用

通过useCallback包裹事件处理函数，确保组件重渲染时函数引用保持不变：

import { useState, useEffect, useCallback } from 'react';

const [isEditing, setIsEditing] = useState<boolean>(false);

const handleBrowserCloseReload = useCallback((e: BeforeUnloadEvent) => {
  e.preventDefault();
  e.returnValue = '';
  return '';
}, []);

useEffect(() => {
  if (isEditing) {
    window.addEventListener('beforeunload', handleBrowserCloseReload);
  } else {
    window.removeEventListener('beforeunload', handleBrowserCloseReload);
  }
  // 组件卸载时强制清理监听，避免内存泄漏
  return () => {
    window.removeEventListener('beforeunload', handleBrowserCloseReload);
  };
}, [isEditing, handleBrowserCloseReload]);

方案2：在`useEffect`内部定义处理函数

将事件处理函数直接写在useEffect内部，这样每次isEditing变化时，函数都是对应周期的实例，移除时能精准匹配：

import { useState, useEffect } from 'react';

const [isEditing, setIsEditing] = useState<boolean>(false);

useEffect(() => {
  const handleBrowserCloseReload = (e: BeforeUnloadEvent) => {
    e.preventDefault();
    e.returnValue = '';
    return '';
  };

  if (isEditing) {
    window.addEventListener('beforeunload', handleBrowserCloseReload);
  } else {
    window.removeEventListener('beforeunload', handleBrowserCloseReload);
  }

  return () => {
    window.removeEventListener('beforeunload', handleBrowserCloseReload);
  };
}, [isEditing]);