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

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

当一个元件被从DOM（或卸载）中除去，它是以去除附着到其任何事件侦听器的最佳做法。

如果您不删除事件侦听器，则事件可能会不必要地耗尽内存。

它也完全有可能是现代浏览器通过垃圾收集处理这个给你，但是为什么还要自己知道哪些浏览器时，你可以采取什么额外的步骤要小心。