reactjs - 为什么我需要在 firebase 中取消订阅 `onAuthStateChanged`

Question

所以我在关注一个关于创建谷歌登录的教程。他说你需要使用 onAuthStateChanged收听登录/退出。我不明白的部分是他说该方法就像“开放订阅”，我们需要“关闭订阅”以防止内存泄漏。

所以在你看代码之前，我无法理解的是这些:

为什么我们需要定义 unsubscribeFromAuth ;

为什么我们需要分配 onAuthStateChanged至 this.unsubscribeFromAuth在 ComponentDidMount 中；

为什么我们需要使用 ComponentWillUnmount 并调用 unsubscribeFromAuth

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      currentUser: null
    }
  }

  unsubscribeFromAuth = null

  componentDidMount() {
    this.unsubscribeFromAuth = auth.onAuthStateChanged(user => {
      this.setState({ currentUser: user })
      console.log(user)
    })
  }

  componentWillUnmount() {
    this.unsubscribeFromAuth()
  }

Answer 1

您取消订阅以避免内存泄漏。

初始化时 auth.onAuthStateChanged()你创建一个监听器。如果您不取消订阅，那么即使您停止使用该监听器，它也会继续监听。这会浪费内存。

为防止发生这种情况，请在卸载应用程序时取消订阅监听器。

为了取消订阅，您需要取消订阅。这就是为什么您将监听器分配给 ComponentDidMount 中的变量的原因.这允许您在想要取消订阅时引用该变量。

我希望这可以将您的 3 个问题置于上下文中。

这里有两个演讲更详细地介绍了该主题。

https://www.youtube.com/watch?v=CRoR_0K586I

https://www.youtube.com/watch?v=uumc9RvSeco

https://www.youtube.com/watch?v=RJRbZdtKmxU