reactjs - 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 元素。在这种情况下，我认为您可以不删除任何事件，因为该事件本身就存在 - 每次安装组件时，它都会将处理程序重新分配给已附加的事件。

如果您想确保组件删除后不会触发事件，则在组件卸载时将处理程序分配给无操作可能更合理。

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

对于 dom 事件监听器来说，这是不同的。

React 应用程序的行为类似于单页应用程序，其中新元素通过路由器和客户端导航分阶段引入(安装)，然后在用户探索页面时卸载。

从 DOM 中删除(或卸载)元素时，最佳实践是删除附加到该元素的所有事件监听器。

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

现代浏览器也完全有可能通过垃圾收集为您处理这个问题，但是当您可以采取额外的步骤来小心时，为什么要费心去了解哪个浏览器会做什么呢？