Firebase Reactjs从上下文获取当前用户

import React, { createContext, useContext } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

// 初始化Firebase
firebase.initializeApp({
  // Firebase配置信息
});

// 创建上下文对象
const UserContext = createContext();

// 定义一个高阶组件，用于提供当前用户信息给子组件
const UserProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    // 监听用户登录状态变化
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      setCurrentUser(user);
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
  }, []);

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

// 自定义钩子函数，用于从上下文获取当前用户
const useCurrentUser = () => {
  const currentUser = useContext(UserContext);
  return currentUser;
};

// 使用示例
const MyComponent = () => {
  const currentUser = useCurrentUser();

  if (currentUser) {
    return <div>当前用户：{currentUser.displayName}</div>;
  } else {
    return <div>未登录</div>;
  }
};

// 在应用程序的根组件中使用UserProvider包裹子组件
const App = () => {
  return (
    <UserProvider>
      <MyComponent />
    </UserProvider>
  );
};