React类组件转函数组件useEffect引发性能问题排查求助

你遇到的页面冻结、内存飙升问题，核心是三个关键逻辑错误导致的：

1. useEffect 缺少依赖数组，引发无限重复订阅 #

你的useEffect没有指定依赖数组，这意味着每次组件渲染（包括状态更新后）都会重新执行这个effect。每次执行都会创建新的Firebase监听器，旧监听器又没被正确清理，导致监听器数量指数级增长，内存被快速耗尽，最终拖垮页面。

2. 清理函数逻辑完全搞反：不是取消订阅，而是新增订阅 #

在类组件里，componentWillUnmount调用this.listener()是执行Firebase返回的取消订阅函数。但你在新代码的清理函数里调用的listener()，是重新执行了一遍订阅逻辑——相当于又新增了一个监听器，雪上加霜地加重了内存负担。

3. listener函数每次渲染都会重复创建 #

你的listener函数定义在组件内部，每次组件渲染都会生成一个新的函数实例，这不仅造成不必要的性能损耗，还会让useEffect的依赖判断逻辑混乱（不过这是次要问题，核心还是前两点）。

const [authUser, setAuthUser] = useState<any | null>(null);
const { firebase } = props;

useEffect(() => {
  // 直接在effect内完成订阅，获取Firebase返回的取消订阅函数
  const unsubscribe = firebase.onAuthUserListener(
    (authUser: any) => {
      localStorage.setItem('authUser', JSON.stringify(authUser));
      setAuthUser(authUser);
    },
    () => {
      localStorage.removeItem('authUser');
      setAuthUser(null);
    }
  );

  // 清理函数返回真正的取消订阅逻辑，React会自动在卸载/依赖变化时执行
  return unsubscribe;
}, [firebase]); // 依赖数组：仅当firebase实例变化时才重新订阅

• 添加精准的依赖数组：把firebase加入依赖数组，确保只有当firebase实例发生变化时才重新创建监听器，彻底避免无意义的重复执行。
• 正确处理取消订阅：firebase.onAuthUserListener会返回一个用于终止监听的函数，我们将其保存在unsubscribe变量中，然后在清理函数里返回它——React会自动在组件卸载或依赖更新时执行这个函数，完美复刻类组件的清理逻辑。
• 移除冗余的listener函数：直接在effect内处理订阅逻辑，避免函数重复创建带来的额外开销。

这样修改后，就能和原类组件的行为完全一致：组件挂载时订阅，卸载时取消订阅，不会出现重复订阅和内存泄漏的问题，页面性能自然就能恢复正常。

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