firebase 的 onAuthStateChanged 如何在 reactJS 的 ComponentDidMount 生命周期中工作答案

【问题标题】：How does firebase's onAuthStateChanged work in ComponentDidMount lifecycle in reactJSfirebase 的 onAuthStateChanged 如何在 reactJS 的 ComponentDidMount 生命周期中工作
【发布时间】：2020-12-11 19:37:21
【问题描述】：

谁能解释一下这个 onAuthStateChanged 函数是如何在 componentDidMount 中工作的。我知道这个生命周期钩子只在组件安装时执行一次。那么里面的函数是怎么执行的呢？

我假设它就像回调函数，它会在事件循环中继续运行，因为当状态发生变化时会被触发，比如 JS 中的 addEventlistner。

componentDidMount() {
    console.log("Context Mounted");
    firebaseapp.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ currentUser: user });
        console.log("User Signed IN ");
      } else {
        console.log("THERE IS NO USER");
      }
    });
  }

【问题讨论】：

您传递给onAuthStateChanged 的身份验证状态观察器函数将在用户的身份验证状态更改时被调用，直到您删除该观察器。如果您观察到不同的情况，请说明您在做什么以及哪些方面没有按您预期的方式工作。
我只是想了解 componentDidMount 的工作原理。即使它执行了一次，但是这个钩子里面的函数又被执行了。所以我猜里面的函数是在回调事件循环中注册的，并在用户注册时执行

标签： reactjs firebase firebase-authentication react-lifecycle-hooks

【解决方案1】：

您已经大致了解了它的要点：在您向 Firebase 注册您的 onAuthStateChanged 回调后，它将被调用：

“立即”与当前身份验证状态
每当身份验证状态发生变化时

由于您调用setState 将用户置于状态，因此只要发生上述事件之一，就会触发 UI 的重新呈现。

这会一直持续到应用退出或取消注册监听器，您通常应该在同一组件的 componentWillUnmount 方法中执行此操作。

【讨论】：

感谢您的精彩回答。所以我是对的！里面的这个函数注册在回调事件循环中，就像 Vanilla JavaScript 中的 addEventListner 一样