React useEffect 清理多个功能答案

【问题标题】：React useEffect clean up for multiple functionsReact useEffect 清理多个功能
【发布时间】：2021-02-07 00:31:30
【问题描述】：

我有一个处理 Firebase 身份验证的 useEffect。当我退出然后再次登录时，我看到这个效果被调用了两次。每次我退出并重新登录时，都称为额外时间。

我感觉我需要用一个清理函数来处理这个问题，但我不知道怎么写。

这是我的钩子：

useEffect(() => {
  console.log('RUNNING THE EFFECT');
  function routeUser(user) {
    // Redirect user somewhere depending on user state
  }
  function setupUser(user: User) {
    // sets the user state object
    routeUser(user);
  }
  if (!user) {
    firebase.auth().onAuthStateChanged((authUser) => {
      if (authenticatedUser) {
        callGraphQLMethod({ variables: { uid: authUser.uid, phoneNumber: authUser.phoneNumber } })
          .then(async (document) => {
            setupUser(...);
          });
      }
    });
  } else {
    // User object is already in state. use that instead
  }
  return () => {
    // >>>>>>>> How do I clean all this up?
  } 
}, [callGraphQLMethod, setUser, user]);

【问题讨论】：

如果你在 Effect 内部设置状态，那么它会渲染因为它有一个新的状态值
但效果并不依附于每个用户状态。意思是，为什么我越来越多的重新渲染。如果我注销并重新登录 100 次，此效果将运行 100 次。这正常吗？
每次效果运行时，您都会添加另一个 onAuthStateChanged 回调。您可能只想在组件安装时运行该部分效果一次。处理具有依赖关系的效果中的其他功能。
每次你改变组件的状态时，它都会重新渲染，每次你改变组件的 prop 时，它都会重新渲染（你当然可以在某些情况下使用 React.memo 部分停止这种行为，如果你想要）但是如果你正在加载一个组件然后在确实安装时你会获取一个值并将其设置为状态它会重新渲染以向你显示结果它是正常的
@DrewReese 并且 onAuthStateChanged 仍然存在？那是我需要清理的吗？

标签： reactjs firebase firebase-authentication react-hooks

【解决方案1】：

很多时候，像这样的函数会返回一个清理函数来取消订阅资源。 onAuthStateChanged 似乎也是这种情况。

onAuthStateChanged

onAuthStateChanged ( nextOrObserver :  Observer < any > | ( ( a : 
  User | null ) => any ) ,  error ? :  ( a :  Error ) => any , 
  completed ? :  firebase.Unsubscribe ) : firebase.Unsubscribe

声明一个变量来保存unsubscribe回调函数
捕获onAuthStateChanged调用的返回值
从效果中返回一个清理函数以调用unsubscribe

使用清理功能更新效果以取消订阅事件流。

useEffect(() => {
  let unsubscribe;

  ...

  if (!user) {
    unsubscribe = firebase.auth().onAuthStateChanged((authUser) => {
      ...
    });
  } else {
    ...
  }

  return () => {
    unsubscribe?.();
  } 
}, [callGraphQLMethod, setUser, user]);

【讨论】：

太棒了。您能否解释一下取消订阅？.() 的作用。它与 onAuthStateChanged 函数的关系。我知道“？”是检查它是否存在，但什么是“.()”？
@Ben Optional Chaining (?.) 运算符检查函数，即可以unsubscribe?.() 代替unsubscribe && unsubscribe()。 Optional Chaining with function calls