React中命名引用的EventListener回调无法触发的问题

你的问题核心是每次组件渲染时，backButtonHandler函数都会被重新创建，导致useEffect中添加的监听器和移除时的函数不是同一个引用，同时未正确设置useEffect的依赖项，使得回调无法被正确绑定、触发。

修复后的代码 #

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

export default function useBackButton(goTo: string) {
  const navigate = useNavigate();

  // 使用useCallback稳定函数引用
  const backButtonHandler = useCallback((event: PopStateEvent) => {
    navigate(goTo, { replace: true });
  }, [navigate, goTo]); // 依赖navigate和goTo，确保值更新时函数重新生成

  useEffect(() => {
    // 仅在首次挂载时添加一条历史记录，避免重复填充历史栈
    window.history.pushState(null, "", document.URL);
    
    window.addEventListener("popstate", backButtonHandler);
    
    return () => {
      window.removeEventListener("popstate", backButtonHandler);
    };
  }, [backButtonHandler]); // 依赖稳定后的backButtonHandler
}

关键修复说明 #

• 用useCallback包裹回调：保证backButtonHandler的引用在依赖项不变时不会重新创建，让添加和移除监听器时使用的是同一个函数实例。
• 完善useEffect依赖数组：将backButtonHandler加入依赖，确保当goTo或navigate变化时，能重新绑定最新的回调逻辑。
• 优化pushState执行时机：原代码每次渲染都会执行pushState，会导致浏览器历史栈被不断填充，改为仅在首次挂载时执行一次（可根据业务需求调整）。

原代码失效原因 #

原代码中backButtonHandler定义在Hook内部，每次组件渲染都会生成新的函数实例。useEffect添加监听器时用的是当前周期的函数，但组件重新渲染后，清理阶段移除的是新的函数实例，而非之前绑定的那个，导致旧监听器无法正常触发。而内联箭头函数看似能生效，实则存在相同的内存泄漏问题——你无法真正移除之前绑定的内联函数，只是新的监听器覆盖了旧逻辑。

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