我看了一个关于使用Reaction和Firebase的实时聊天室的教程.下面的代码是AuthContext文件,有人能解释一下useEffect的部分吗,为什么清理函数只是unSub()?

The tutorial link

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>
  );
};

我试着在网上找到解决方案,但并不是真正相关

推荐答案

为什么清理功能只需unsub()

这是因为Firebase JS SDK中的onAuthStateChanged()方法返回一个从观察者中取消引用的函数.

因此,执行const whateverVariableName = onAuthStateChanged(auth, (user) => {...})操作将设置观察者并将函数赋值给变量.然后执行whateverVariableName()(请注意括号)取消订阅《观察家报》.

Reactjs相关问答推荐

react-hook-form问题:为什么getValues不返回大多数当前值?

Firebase删除UserWithEmail AndPassword仅创建匿名用户

react 派生状态未正确更新

如何在Reac.js中通过子组件和props 调用父组件函数?

使用Reaction-Hook-Form时未激发React.js onBlur事件

使用筛选器的Primereact DataTable服务器端分页?

太多的重新渲染 - React 中的无限循环.如何使用React.effect并使用fetch?

通过createRoot创建的React元素无法调用Provider值

当 URL 与我声明的任何路由都不匹配时,如何使用不会重定向到错误页面的动态 URL? - react 路由 dom

我无法通过 useContext 显示值

强制 useEffect 仅运行一次

如何在我的自定义主题中样式化MUI TreeItem组件

i18next中复数键的理解

如何覆盖自定义 MUI 手风琴的样式(分隔线和折叠图标)

虽然通过了身份认证,但并没有导航到请求的页面

需要在窗口调整大小时更新 React 组件

react 事件顺序

ReactJS:useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

仅在重新渲染后设置状态

react / firebase 基地.如何在我的项目中保存更新的数据?