React中firebase.auth().onAuthStateChanged的正确放置与重复触发解决

问题根源在于你把onAuthStateChanged的注册放在了render方法里。React的render方法会在组件每次重渲染时执行，每次执行都会新增一个Auth状态监听器，导致监听器堆积，状态变化时多个监听器同时触发，最终形成无限日志流。

正确的做法是将监听器的注册放在组件挂载阶段（componentDidMount），这样只会注册一次；同时在组件卸载时（componentWillUnmount）取消监听，避免内存泄漏。

修改后的完整代码：

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/storage';

import './App.css';
import React, { Component } from 'react';

const firebaseConfig = {
  ...
};

firebase.initializeApp(firebaseConfig)

const auth = firebase.auth()
const database = firebase.database()
var database_ref = database.ref()
var storageRef = firebase.storage().ref();


class App extends Component {
  state = {}
  // 保存取消监听的函数
  unsubscribeAuthListener = null

  componentDidMount() {
    // 组件挂载时注册监听器，保存unsubscribe函数
    this.unsubscribeAuthListener = firebase.auth().onAuthStateChanged((curUser) => {
      if(curUser != null){
        console.log("hi")
        // 这里可以更新组件状态，比如保存用户信息到state
        // this.setState({ user: curUser })
      } else {
        // 用户登出时的处理
        // this.setState({ user: null })
      }
    })
  }

  componentWillUnmount() {
    // 组件卸载时取消监听，清理资源
    if (this.unsubscribeAuthListener) {
      this.unsubscribeAuthListener()
    }
  }

  render(){
    return (<React.Fragment></React.Fragment>);
  };
}

export default App;

关键修改点：

• 将onAuthStateChanged移到componentDidMount中，确保只注册一次监听器
• 保存监听器返回的unsubscribe函数，用于组件卸载时清理
• 在componentWillUnmount中调用unsubscribe，避免内存泄漏

这样修改后，监听器只会在组件挂载时注册一次，当Auth状态变化（登录/登出）时才会触发回调，不会出现无限日志的问题。

内容的提问来源于stack exchange，提问作者Charmalade