使用 useEffect 与 onAuthStateChanged 检测 Firebase 用户更改 - 有什么区别？答案

【问题标题】：Detecting Firebase user change with useEffect vs onAuthStateChanged - what's the difference?使用 useEffect 与 onAuthStateChanged 检测 Firebase 用户更改 - 有什么区别？
【发布时间】：2021-06-20 05:06:21
【问题描述】：

我正在使用带有 Next.JS/React/Typescript 的 firebase NPM 包。据我所知，有两种方法可以观察用户何时发生变化：

useEffect(() => {
  // do something
}, [firebase.auth().currentUser])

类似的东西

const onAuthStateChanged = () => {
  return firebase.auth().onAuthStateChanged((user) => {
    // do something
  });
};

useEffect(() => {
  const unsubscribe = onAuthStateChanged();
  return () => {
    unsubscribe();
  };
}, [])

这里有什么不同？他们似乎都只看当前用户；一个比另一个好？

【问题讨论】：

标签： reactjs firebase firebase-authentication react-hooks use-effect

【解决方案1】：

这将在每次 currentUser 更改时运行。

useEffect(() => {
  // do something
}, [firebase.auth().currentUser])

这仅在您的组件第一次安装时运行。您创建一个侦听器来处理更改并在组件卸载时将其删除。

useEffect(() => {
  const unsubscribe = onAuthStateChanged();
  return () => {
    unsubscribe();
  };
}, [])

【讨论】：

那么第一个 useEffect 和第二个的监听器有效地做同样的事情还是我误解了监听器/useEffect 的工作原理？
useEffect 是一个特殊的钩子，它提供给用户在组件渲染后执行的事情。 firebase.auth()。侦听器与 React 渲染无关（除非您在侦听器处理程序中设置状态）