Question

我手动将React组件挂钩到Redux商店。是的，我意识到Redux的Dan Abramov recommends against this。我最终会到处看看react-redux，但是现在我想了解发生了什么。

componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
        const storeState = store.getState();
        this.setState({
            someData: storeState.someData
        });
    }.bind(this));
}
componentWillUnmount () {
    this.unsubscribe();
}

这是我在标签页组件中的一些代码。当用户更改选项卡以显示不同的数据时，这些选项卡页面将在父组件中进行交换。我已逐步完成调试器并确认当用户更改选项卡时，会按顺序执行以下操作：

上一个标签已卸载（componentWillUnmount次点击并this.unsubscribe()被调用。this是上一个标签组件，正如预期的那样）
已安装新标签页。（componentDidMount触发，this是新标签组件，正如预期的那样）
setState在订阅回调中被调用，其中this是PREVIOUS TAB，并且回应抱怨错误：

警告：setState（...）：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState（）。这是一个无操作。请检查Tab组件的代码。

这对我来说很奇怪。不应该调用unsubscribe，因为我已经阻止在未安装的组件上调用此回调？ post that I'm following along with似乎表明，做我做过的事情应该会让这个警告消失，而只是质疑这是不是一个好主意。但就我而言，它仍然存在。

我不认为这很重要，但我使用的是ES6“类”语法，而原来似乎不是。

Answer 1

subscribe(listener: () => void): Unsubscribe;

让我们阅读订阅方法doc。

订阅会在每次dispatch()调用之前进行快照。   如果您在调用侦听器时订阅或取消订阅，   这对目前的dispatch()没有任何影响   进展。但是，下一个dispatch()调用，无论是否嵌套，   将使用订阅列表的最新快照。

由于您首先调用了调度方法，因此所有侦听器都会被调用，而您的unsubsribe调用只会在下一次调度调用时发生。

在componentWillUnmount中Redux取消订阅仍然会调用subscribe回调

1 个答案: