使用 useEffect 与 onAuthStateChanged 检测 Firebase 用户更改 - 有啥区别？

Posted 2023-03-17

【中文标题】使用 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();
  ;
, [])

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

【参考方案1】：

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

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

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

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

【讨论】：

那么第一个 useEffect 和第二个的监听器有效地做同样的事情还是我误解了监听器/useEffect 的工作原理？

useEffect 是一个特殊的钩子，它提供给用户在组件渲染后执行的事情。 firebase.auth()。侦听器与 React 渲染无关（除非您在侦听器处理程序中设置状态）