React中beforeunload事件监听器无法移除的原因排查

你的代码里最直接的问题是事件监听的捕获模式不匹配：

• 添加监听器时，你传入了第三个参数{ capture: true }开启了捕获模式；但移除监听器时，没有传递这个参数，默认使用冒泡模式（capture: false）。
• 浏览器会把「相同事件类型、相同回调函数、相同捕获/冒泡模式」作为同一个监听器的判断依据，模式不匹配的话，removeEventListener就找不到对应的监听器，自然无法移除。

解决方法很简单，移除时和添加时保持一致的参数：

return (): void => {
  window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
};

另外补充两个可能导致类似问题的常见场景（你的代码里没出现，但可以参考）：

• 回调函数引用变化：如果监听器函数是在组件内部或useEffect里定义的，每次组件渲染都会生成新的函数实例。移除时用的是新实例，和之前添加的不是同一个，就会移除失败。这种情况需要用useCallback缓存函数，保证引用稳定。
• 重复添加监听器：如果useEffect的依赖数组设置不当，导致多次执行addEventListener，但移除逻辑只执行一次，会残留多余的监听器。你的代码里依赖数组是空数组，不会出现这个问题。

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