如何在firebase中正确实现onAuthStateChanged

Question

因此，我正在遵循有关创建Google登录的教程。他说，您需要使用onAuthStateChanged来监听登录/注销。我无法理解的部分是当他说该方法类似于“开放订阅”，我们需要“关闭订阅”以防止内存泄漏。

所以在您查看代码之前，我无法理解的是这些：

1. 为什么我们需要定义unsubscribeFromAuth;
2. 为什么我们需要在ComponentDidMount中将onAuthStateChanged分配给this.unsubscribeFromAuth；
3. 为什么我们需要使用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中将侦听器分配给变量的原因。这使您可以在想要取消订阅时引用变量。