Firebase 的 onAuthStateChanged 如何在 reactJS 的 ComponentDidMount 生命周期中工作

Question

誰能解釋一下這個 onAuthStateChanged function 如何在 componentDidMount 中工作。 我知道這個生命周期鈎子只在組件安裝時執行一次。 那么里面的function是怎么執行的呢？

我假設它就像回調 function 繼續在事件循環中運行，因為當 state 像 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");
      }
    });
  }

Answer 1

你幾乎明白了它的要點：在你用 Firebase 注冊你的onAuthStateChanged回調后，它將被調用：

1. “立即”使用當前身份驗證 state
2. 每當身份驗證 state 更改時

由於您調用setState將用戶放入 state，因此只要發生上述事件之一，就會觸發 UI 的重新呈現。

這一直持續到應用程序退出或直到您取消注冊偵聽器，您通常應該在同一組件的componentWillUnmount方法中執行此操作。