在反应中绑定和删除事件的确切位置

Question

我在 componentWillMount 中添加了一个 eventListener，并在 componentWillUnMount 中删除了它。

像这样

componentWillMount() {
    store.on("onSuccess", this.onSuccess);
}

componentWillUnMount() {
    store.removeListener("onSuccess", this.onSuccess);
}

但是单击按钮时组件会在 DOM 中加载。实际上这个组件有一个标志。每次我单击一个按钮时，标志设置为 true 并且 componentWillMount 被调用。但是当标志设置为 false 时，即使 DOM.

中不存在组件，也不会调用 componentWillUnmount

所以发生的事情是，当我再次单击按钮组件出现时，但我发出了一个事件，侦听器被触发了两次。我认为这是因为旧组件仍然存在并且仍在侦听事件。

所以我只想知道，removeListeners 的确切位置是什么。

Answer 1

看来您只是在 componentWillUnMount() 生命周期方法中有一个打印错误。它应该是 componentWillUnmount()（较低的 m）。

附加信息：

在 React 的较新版本中，componentWillMount 生命周期方法成为遗留方法（并重命名为 UNSAFE_componentWillMount()）并将在 React 17 中删除。为此，建议使用 componentDidMount() 生命周期方法。（请参阅有关 legacy lifecycle methods 的更多详细信息。

在反应中绑定和删除事件的确切位置

Exact place to bind and remove events in react

javascript

flux

reactjs