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（或卸载）中删除元素时，最好删除附加到它的任何事件侦听器。

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

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

window.onpopstate - 我是否需要删除此事件处理程序？

1 个答案: