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事件监听器，这是不同的。

反应应用程序通常像单页应用程序一样，其中新元素通过路由器和客户端侧导航分阶段（安装），随后在用户浏览页面时卸载。

从DOM（或卸载）中删除元素时，最佳做法是删除附加到它的任何事件侦听器。

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

它也完全有可能是现代浏览器通过垃圾收集为你处理这个问题，但为什么在你可以采取额外措施时要小心自己知道哪个浏览器做了什么。