React useEffect模拟ComponentWillUnmount及Firebase onAuthStateChanged加载处理咨询

• 你这段代码的 useEffect 依赖数组为 []，代表这个副作用只会在组件首次渲染完成后触发一次
• React 规定：如果 useEffect 的回调函数返回一个函数，这个返回的函数会在组件卸载前被自动执行，这个特性就完全对应类组件的 ComponentWillUnmount 生命周期
• 代码里 onAuthStateChanged 调用后返回的 unsubscribe 是Firebase提供的取消监听函数，组件卸载时自动执行它，就能及时移除认证状态监听器，避免内存泄漏、给已卸载组件更新状态的报错问题。

你现有代码的 loading 逻辑是反向的：初始值为 false，回调里直接设为 true，不符合“校验身份时加载、拿到结果后结束加载”的逻辑，调整方案如下：

1. 初始 loading 状态设为 true，代表页面加载后立刻开始校验用户身份，进入加载状态
2. 当 onAuthStateChanged 回调触发，不管返回的用户是登录态还是未登录态，拿到明确结果后就把 loading 设为 false，代表校验完成
3. 可选添加组件挂载标记，避免组件卸载后回调触发更新状态导致的React警告

修正后的代码示例：

const [loading, setLoading] = useState(true);
const [currentUser, setCurrentUser] = useState(null);

useEffect(() => {
  let isMounted = true;
  const auth = getAuth();
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (isMounted) {
      setCurrentUser(user);
      setLoading(false); // 拿到认证结果后结束加载
    }
  });

  return () => {
    isMounted = false;
    unsubscribe();
  };
}, []);

调整完成后，你可以用 loading 状态控制加载动画、路由拦截逻辑：loading 为 true 时显示全局加载占位，为 false 时再渲染实际页面内容或者执行路由跳转逻辑。

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