React Js 中的生命周期方法如何与变量 unsubfromAuth 一起使用？

Question

class App extends Component{
constructor(){
super() 
this.state = {
  currentuser : null
}}
  
unsubfromAuth = null

componentDidMount(){

this.unsubfromAuth =  auth.onAuthStateChanged((user) => {
  this.setState({currentuser : user})
  console.log(user)
})
  }
 componentWillUnmount() {
    this.unsubfromAuth()
  }
render(){
  return (
    <div className="App">
      <Router>
      <Header currentUser={this.state.currentuser}/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/Hats" component={Hats}/>
          <Route exact path="/shoes" component={Shoes}/>
          <Route exact path="/jackets" component={Jacket}/>
          <Route exact path="/men" component={Men}/>
          <Route exact path="/women" component={Women}/>
          <Route exact path="/shop" component={Shop}/>
          <Route exact path="/signin" component={Signin}/>
        </Switch>
      </Router>      
    </div>
  )
}}

export default App

为什么用在ComponentWillUnmount中？我听说了一些关于内存泄漏的事情，它能阻止它吗？为什么它在 ComponentDidMount 中被改变了？我在 Reactjs 中使用 firebase。

Answer 1

这是 React 组件生命周期中的标准流程，当您必须订阅某个事件时。这只是实例变量的初始化，一旦挂载Component就会执行：

unsubfromAuth = null

这是您有效订阅事件 ("auth-state-changed") 并开始收听的地方，您希望始终订阅 componentDidMount 或 [=14= 中的此类事件] 如果你使用钩子，因为这是在组件完全安装时执行的。

方法 auth.onAuthStateChanged() returns 调用时自动清除任何订阅的函数。

componentDidMount(){

this.unsubfromAuth =  auth.onAuthStateChanged((user) => {
  this.setState({currentuser : user})
  console.log(user)
})
  }

退订方法调用时间：

componentWillUnmount() {
    this.unsubfromAuth()
  }

这将在组件即将卸载以清除订阅之前执行，因为您不希望您的事件侦听器和订阅在您卸载时继续保留在内存中，否则您最终会占用内存如果您的组件多次安装和卸载，则会发生泄漏。

React Js 中的生命周期方法如何与变量 unsubfromAuth 一起使用？

How lifecycle methods in react Js are working with the variable unsubfromAuth?

javascript

firebase

reactjs