商店的更改侦听器没有在 componentWillUnmount 上被删除？

Question

我正在 reactjs-flux 上编写一个简单的应用程序，一切正常，除了我收到来自 reactjs 的警告，告诉我我正在对未安装的组件调用 setState。

我发现这是因为未从 componentWillUnmount 上的商店中删除挂钩组件的更改监听器。我知道它是因为当我从 Eventemitter 打印监听器列表时，我看到应该被销毁的监听器仍然存在，并且随着我多次 mount/unmount 相同的组件，列表变得更大。

我从我的 BaseStore 粘贴代码：

import Constants from '../core/Constants';
import {EventEmitter} from 'events';

class BaseStore extends EventEmitter {
  // Allow Controller-View to register itself with store
  addChangeListener(callback) {
    this.on(Constants.CHANGE_EVENT, callback);
  }

  removeChangeListener(callback) {
    this.removeListener(Constants.CHANGE_EVENT, callback);
  }

  // triggers change listener above, firing controller-view callback
  emitChange() {
    this.emit(Constants.CHANGE_EVENT);
  }
}

export default BaseStore;

我粘贴了遇到此错误的组件的相关代码（尽管所有组件都会发生）：

@AuthenticatedComponent
class ProductsPage extends React.Component {
  static propTypes = {
    accessToken: PropTypes.string
  };

  constructor() {
    super();
    this._productBatch;
    this._productBatchesNum;
    this._activeProductBatch;
    this._productBlacklist;
    this._searchById;
    this._searchingById;
    this.state = this._getStateFromStore();
  }

  componentDidMount() {
    ProductsStore.addChangeListener(this._onChange.bind(this));
  }

  componentWillUnmount() {
    ProductsStore.removeChangeListener(this._onChange.bind(this));
  }

  _onChange() {
    this.setState(this._getStateFromStore());
  }
}

这让我很抓狂。有什么想法吗？

谢谢！

Answer 1

尝试从 addChangeListener 和 removeChangeListener 中删除 .bind(this)。它们在被调用时已经绑定到您的组件。

Answer 2

所以我找到了解决方案，事实证明我只需要将 this._onChange.bind(this) 分配给内部属性，然后再将其作为参数传递给 removechangelistener 和 addchangelistener.这是解决方案：

  componentDidMount() {
    this.changeListener = this._onChange.bind(this);
    ProductsStore.addChangeListener(this.changeListener);
    this._showProducts();
  }
  componentWillUnmount() {
    ProductsStore.removeChangeListener(this.changeListener);
  }

但是，我不知道为什么这样可以解决问题。有什么想法吗？

Answer 3

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the exports component.

我在多个 React 组件中使用完全相同的实现。也就是说，这在几个 .jsx 组件中重复。

componentDidMount: function() {
    console.log('DidMount- Component 1');
   ViewStateStore.addChangeListener(this._onChange);
},

componentWillUnmount: function() {
    console.log('DidUnMount- Component 1');
   ViewStateStore.removeChangeListener(this._onChange);
},

_onChange:function()
{
    console.log('SetState- Component 1');
    this.setState(getStateFromStores());
},

可能的解决方案

目前正在为我锻炼以下，但有点脾气暴躁。将调用包装在 function/named-function.

中

ViewStateStore.addChangeListener(function (){this._onChange});

大家也可以试试

ViewStateStore.addChangeListener(function named(){this._onChange});

理论

EventEmitter 出于某种原因对识别要删除的回调感到困惑。使用命名函数可能会有所帮助。

Answer 4

我决定了

class Tooltip extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
             handleOutsideClick: this.handleOutsideClick.bind(this)
        };
    }

    componentDidMount () {
         window.addEventListener('click', this.state.handleOutsideClick);
    }

    componentWillUnmount () {
         window.removeEventListener('click', this.state.handleOutsideClick);
    }
}

Answer 5

这是一个es6问题。 React.createClass 为其范围内定义的所有函数正确绑定 'this'。

对于es6，你必须自己做一些事情来绑定正确的'this'。但是，每次调用 bind(this) 都会创建一个新函数，并且将其 return 值传递给 removeChangeListener 将不匹配传递给由先前的 bind(this) 调用创建的 addChangeListener 的函数。

我在这里看到一个解决方案，其中为每个函数调用一次 bind(this) 并保存 return 值并在以后重新使用。那会很好的。一个更流行、更简洁的解决方案是使用 es6 的箭头函数。

componentDidMount() {
    ProductsStore.addChangeListener(() => { this._onChange() });
}

componentWillUnmount() {
    ProductsStore.removeChangeListener(() => { this._onChange());
}

箭头函数捕获封闭上下文的 'this'，而无需每次都创建新函数。它是为这样的东西设计的。

Answer 6

简短版本：expect(f.bind(this)).not.toBe(f.bind(this));

更长的解释：

问题的原因是 EventEmitter.removeListener 要求您传递一个您之前在 EventEmitter.addListener 注册的函数。如果您传递对任何其他函数的引用，则它是一个静默的空操作。

在您的代码中，您将 this._onChange.bind(this) 传递给 addListener。 bind returns 绑定到此的 new 函数。然后您将丢弃对该绑定函数的引用。然后你尝试删除另一个由绑定调用创建的 new 函数，它是一个空操作，因为它从未被添加。

React.createClass 自动绑定方法。在 ES6 中，您需要在构造函数中手动绑定：

@AuthenticatedComponent
class ProductsPage extends React.Component {
  static propTypes = {
    accessToken: PropTypes.string
  };

  constructor() {
    super();
    this._productBatch;
    this._productBatchesNum;
    this._activeProductBatch;
    this._productBlacklist;
    this._searchById;
    this._searchingById;
    this.state = this._getStateFromStore();
    // Bind listeners (you can write an autoBind(this);
    this._onChange = this._onChange.bind(this);
  }

  componentDidMount() {
    // listener pre-bound into a fixed function reference. Add it
    ProductsStore.addChangeListener(this._onChange);
  }

  componentWillUnmount() {
    // Remove same function reference that was added
    ProductsStore.removeChangeListener(this._onChange);
  }

  _onChange() {
    this.setState(this._getStateFromStore());
  }

有多种方法可以简化绑定——您可以使用 ES7 @autobind 方法装饰器（例如 npm 上的 autobind-decorator），或者编写一个在构造函数中调用的 autoBind 函数 autoBind(this);.

在 ES7 中，您将（希望）能够使用 class 属性以获得更方便的语法。如果你愿意，你可以在 Babel 中启用它作为 stage-1 提案 http://babeljs.io/docs/plugins/transform-class-properties/ 的一部分。然后，您只需将事件侦听器方法声明为 class 属性而不是方法：

_onChange = () => {
    this.setState(this._getStateFromStore());
}

因为 _onChange 的初始值设定项是在构造函数的上下文中调用的，箭头函数会自动将 this 绑定到 class 实例，因此您只需将 this._onChange 作为无需手动绑定的事件处理程序。

Answer 7

由于您已经知道解决方案，我将尝试解释发生了什么。
根据 ES5 标准，我们曾经编写以下代码来添加和删除监听器。

componentWillMount: function() {
    BaseStore.addChangeListener("ON_API_SUCCESS", this._updateStore);
},
componentWillUnmount: function() {
    BaseStore.removeChangeListener("ON_API_SUCCESS", this._updateStore);
}

在上面的代码中，回调函数（即：this._updateStore）的内存引用是相同的。因此，removeChangeListener 将查找引用并将其删除。

因为 ES6 标准默认缺少自动绑定 this，您必须将 this 显式绑定到该函数。

Note: Bind method returns new reference for the callback. 有关绑定

的更多信息，请参阅 here

这就是问题所在。当我们执行 this._updateStore.bind(this) 时，绑定方法 returns 该函数的新引用。因此，您作为参数发送给 addChangeListener 的引用与 removeChangeListener 方法中的引用不同。

this._updateStore.bind(this) != this._updateStore.bind(this)

解法：
有两种方法可以解决这个问题。
1. 将事件处理程序(ie: this._updateStore)作为成员变量存储在构造函数中。（您的解决方案）
2. 在商店中创建一个自定义的 changeListener 函数，它将为您绑定 this。（来源：here）

解法一解释：

constructor (props) {
    super(props);
    /* Here we are binding "this" to _updateStore and storing 
    that inside _updateStoreHandler member */

    this._updateStoreHandler = this._updateStore.bind(this);

    /* Now we gonna user _updateStoreHandler's reference for 
    adding and removing change listener */
    this.state = {
        data: []
    };
}

componentWillMount () {
    /* Here we are using member "_updateStoreHandler" to add listener */
    BaseStore.addChangeListener("ON_STORE_UPDATE", this._updateStoreHandler);
}
componentWillUnmount () {
    /* Here we are using member "_updateStoreHandler" to remove listener */
    BaseStore.removeChangeListener("ON_STORE_UPDATE", this._updateStoreHandler);
}

在上面的代码中，我们将 this 绑定到 _updateStore 函数并将其分配给构造函数内部的成员。稍后我们将使用该成员来添加和删除更改侦听器。

方案二解释： 在这个方法中，我们修改了 BaseStore 的功能。想法是修改 BaseStore 中的 addChangeListener 函数以接收第二个参数 this 并且在该函数中我们将 this 绑定到回调并存储该引用，以便在删除更改侦听器时我们可以使用该引用删除。

您可以在此处和源代码 here.

找到完整的代码要点

商店的更改侦听器没有在 componentWillUnmount 上被删除？

Stores' change listeners not getting removed on componentWillUnmount?

reactjs

reactjs-flux

flux