Question

所以，我有两家商店。 First PageStore服务于特定页面的业务逻辑，以及Android / iOS全局事件的第二个globalStore逻辑。当用户输入特定页面React.componentDidMount调用

时

pageEntered: function () {
    this.listenTo(globalStore, this.locationUpdated);
},

因此，我的pageStore开始收听全球存储以获取GPS更新。但有没有办法在React.componentWillUnmount上断开listenTo？

Answer 1

有一个例子，如何取消订阅商店收听（取自官方示例）：

var Status = React.createClass({
    getInitialState: function() { },
    onStatusChange: function(status) {
        this.setState({
            currentStatus: status
        });
    },
    componentDidMount: function() {
        this.unsubscribe = statusStore.listen(this.onStatusChange);
    },
    componentWillUnmount: function() {
        this.unsubscribe();
    },
    render: function() {
        // render specifics
    }
});

Answer 2

这是考虑上述示例中发生的事情的一种方式：

var myFunc = function(){
    console.log("This gets fired immediately");
    var randomNumber = Math.ceil(Math.random()*10);
    return function() {
        return randomNumber;
    }
}

var a = myFunc(); //Console log fires IMMEDIATELY, a is the returned function

a(); //some integer from 1 to 10

因为当我们将myFunc分配给变量时会调用myFunc，所以console.log会立即触发 - 就像this.unsubscribe = statusStore.listen（this.onStatusChange）; ＆＃34;开启＆＃34;一旦componentDidMount发生，侦听器就会立即发生。

在componentDidMount生命周期方法中，我们将侦听器附加到使用 .listen 。这是被调用的。为方便起见，我们将函数的结果分配给this.unsubscribe。

如果你看一下这个要点（https://gist.github.com/spoike/ba561727a3f133b942dc#file-reflux-js-L60-L68）的第60-68行想到.listen返回一个删除事件监听器的函数。

在componentWillUnmount中，我们调用this.unsubscribe删除侦听器。您可以将.listen视为返回一个删除＆＃39;听众的函数。当componentWillUnmount生命周期发生时，我们调用该函数并终止监听器。

Tl; dr：想象一下.listen附加一个监听器并返回一个关闭监听器的函数 - 当你第一次调用监听器时，当你调用返回的函数时它会关闭监听器< / em>的

断开Reflux listenTo方法

2 个答案: