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，通常是内存泄漏的原因。

具有内存泄漏的React组件

2 个答案: