为什么我需要在firebase中取消订阅`onAuthStateChanged`答案

【问题标题】：Why do I need to unsubscribe to `onAuthStateChanged` in firebase为什么我需要在firebase中取消订阅`onAuthStateChanged`
【发布时间】：2019-12-07 06:16:08
【问题描述】：

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

所以在你看代码之前，我无法掌握的是这些：

为什么我们需要定义unsubscribeFromAuth ;
为什么我们需要在 ComponentDidMount 中将onAuthStateChanged 分配给this.unsubscribeFromAuth；
为什么我们需要使用 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()
  }

【问题讨论】：

标签： reactjs firebase firebase-authentication

【解决方案1】：

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

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

为防止这种情况发生，您在卸载应用时取消订阅侦听器。

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

我希望这能将您的 3 个问题放在上下文中。

这里有两个更详细地涵盖该主题的演讲。

【讨论】：