React中useEffect的Firebase清理函数unsub()工作原理解析

我看了一个用React和Firebase实现实时聊天室的教程，下面是AuthContext文件的代码，想请教useEffect部分的逻辑：为什么清理函数要直接调用unsub()？我网上搜过但没找到相关内容。

import { createContext, useEffect, useState } from "react";
import { auth } from "../firebase";
import { onAuthStateChanged } from "firebase/auth";

export const AuthContext = createContext();

export const AuthContextProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState({});

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      console.log(user);
    });

    return () => {
      unsub();
    };
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

这要从两个核心点理解：

1. onAuthStateChanged的本质
   Firebase的onAuthStateChanged是一个订阅函数——调用它时，会注册一个监听器，实时监听用户的认证状态变化（比如登录、登出、用户信息更新），只要状态变动，传入的回调函数就会触发。同时，这个函数会返回一个取消订阅的函数（即代码里的unsub），调用它就能终止监听。

2. React useEffect清理函数的作用
   useEffect的清理函数会在组件卸载时，或者下一次useEffect执行前触发。这里的AuthContextProvider即便作为全局组件，若因路由切换等原因被卸载，或是依赖项变化触发useEffect重新执行（此处依赖项为空数组，仅在组件挂载、卸载时各执行一次），清理函数都会运行。

必须调用unsub()的原因： #

• 防止内存泄漏：如果不取消订阅，即便组件已卸载，Firebase的监听器仍会持续存在，不断监听认证状态变化并尝试调用setCurrentUser更新已不存在的组件状态，这会引发内存泄漏，甚至触发React的“无法更新已卸载组件”警告。
• 避免不必要的资源消耗：持续的监听会占用浏览器资源，取消订阅能释放这些资源，提升应用性能。

这是React组件与外部实时订阅（如Firebase、WebSocket）配合的标准做法——订阅时保存取消方法，在组件清理时执行，确保资源被正确回收。

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