javascript - 具有内存泄漏的 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

在卸载组件之前，您需要解除绑定(bind) authChange 处理程序。您可以在 componentWillUnmount 中执行此操作.

由于您是使用传入的第一个 props 创建处理程序函数，因此您应该将其保存到一个属性中，以便稍后可以解除绑定(bind):

  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 来分离事件监听器，但您应该使用框架中的任何相应方法。