window.onpopstate-我需要删除此事件处理程序吗?

Question

我正在使用 window.onpopstate事件处理程序来聆听后向前浏览器按钮事件。我的代码看起来像这样：

componentDidMount() {
    window.onpopstate = this.onBackOrForwardButtonEvent;
}
onBackOrForwardButtonEvent = (e) => {
    e.preventDefault();
    log.info('back or forward button pressed');
    if (this.props.route.path !== '/app') {
       // ... do something
    }
};

我的问题是：我需要删除此事件听众 - 也许在componentWillUnmount中？

类似：

componentWillUnmount() {
    window.removeEventListener('onpopstate', this.onBackOrForwardButtonEvent, false)
}

我已经看到了上述使用onPopState的示例

示例：https：//github.com/reacttraining/react-router/issues/967

Answer 1

我认为您可以不用担心删除所附事件。

您的示例很有趣，因为事件附加到窗口而不是DOM元素。在这种情况下，我认为您可以删除任何事件，因为该事件本地存在 - 每次您的组件安装时，都会将处理程序重新分配到已经连接的事件中。

如果要确保删除组件后不会发射事件，则将处理程序分配给NO-OP可能会更合理。

componentDidUnmount() {
  window.onpopstate = () => {}
}

对于DOM事件听众，这是不同的。

React应用程序通常像单页应用程序一样起作用，该应用程序通过路由器和客户端侧导航逐步（已安装），然后随后在用户探索页面时卸下。

从DOM（或未填充）中删除元素时，删除附加的任何事件侦听器是最好的做法。

如果您不删除事件侦听器，则该事件有可能会继续不必要地用尽内存。

现代浏览器通过垃圾收集为您处理这一点，但是为什么要知道哪个浏览器会做什么，何时您可以采取额外的步骤来小心。