运行函数和调用返回函数的函数之间的区别答案

【问题标题】：Diferrence between running a function and call a function that return a function运行函数和调用返回函数的函数之间的区别
【发布时间】：2021-08-21 19:50:22
【问题描述】：

useEffect(() => {
    // parameter is the user state of the auth
    // onAuthStateChanged: method from auth library
    const unsubscribeFromAuth = auth.onAuthStateChanged(user => {
      setCurrentUser(user);
    })
    // returned function will be called on component unmount
    return () => unsubscribeFromAuth();
  }, []);

有人可以向我解释一下 return () => unsubscribeFromAuth(); 之间有什么区别吗？直接返回 unsubscribeFromAuth() ？谢谢

【问题讨论】：

如果您return unsubscribeFromAuth()，您立即取消订阅并返回 (undefined) 返回值。如果你返回一个函数，无论是什么调用外部函数（在本例中是 React 的内部机制）都会决定何时发生。
这听起来像是@jonrsharpe 的答案。另外：return unsubscribeFromAuth 不会做同样的事情吗？
@FrankvanPuffelen 是的，会的。

标签： reactjs firebase firebase-authentication react-hooks

【解决方案1】：

当你调用一个返回这样的函数时

return () => unsubscribeFromAuth();

它将返回一个函数，您可以使用该函数直接调用 unsubscribeFromAuth

但是如果你用这个返回调用一个函数

return unsubscribeFromAuth()

它通过调用该函数返回实际值

希望你理解

【讨论】：

【解决方案2】：

                        unsubscribeFromAuth():

你只是调用函数，它会立即运行

                   return () => unsubscribeFromAuth():

但是这次你没有调用那个函数，而是把它作为cleanup function（根据 React）提供给 useEffect 钩子。并且当相应的组件卸载时，清理功能将运行以取消订阅。如果不清理，组件在按预期重新渲染后可能无法工作

【讨论】：