具有內存泄漏的React組件

Question

我有一段遺留代碼，它在每次請求時在服務器上呈現一個react組件，這顯然存在內存泄漏。 我已經解決了這個代碼的問題：

  componentWillMount: function () {
    var onLogin = this.props.onLogin || function () {},
        onLogout = this.props.onLogout || function () {};

    this.on('authChange', function () {
      console.log('user authenticated:', this.state.isAuthenticated);
      return this.state.isAuthenticated
              ? onLogin(this.state)
              : onLogout(this.state);
    }.bind(this));
  },

我相信在每個請求中， this對象都存儲了一個新的監聽器，但我不明白為什么在完成組件的渲染時， this元素沒有被標記為垃圾。

Answer 1

在卸載組件之前，需要取消綁定authChange處理程序。 您可以在componentWillUnmount執行此操作。

由於您使用傳入的第一個道具創建處理函數，因此應將其保存到屬性中，以便以后可以取消綁定：

  componentWillMount: function () {
    var onLogin = this.props.onLogin || function () {},
        onLogout = this.props.onLogout || function () {};

    this.authChange = function () {
      console.log('user authenticated:', this.state.isAuthenticated);
      return this.state.isAuthenticated
              ? onLogin(this.state)
              : onLogout(this.state);
    }.bind(this);

    this.on('authChange', this.authChange);
  },

  componentWillUnmount: function () {
      this.off('authChange', this.authChange);
      this.authChange = null;
  }

需要注意的是，當我看到this.on我想你可能會使用jQuery，但目前尚不清楚這將是這種情況。 我的回答使用this.off來分離事件監聽器，但是您應該使用框架中相應方法的任何內容。

Answer 2

我會將您的函數移動到componentDidMount並在componentWillUnmount上添加清理

重要提示 ： componentWillMount被稱為服務器 端和客戶端 ，但componentDidMount只調用客戶端上。

如果您正在使用eventListeners ， setInterval或其他需要清理的函數，請將它們放在componentDidMount 。 服務器不會調用componentWillUnmount ，通常是內存泄漏的原因。