2017-12-27 508 views
0

我正在使用window.onpopstate事件处理程序来侦听后退和前进浏览器按钮事件。我的代码看起来是这样的: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

回答

2

我觉得你确定不是担心去除附着事件。

你的例子很有趣,因为事件被附加到窗口而不是dom元素。在这种情况下,我认为你没有删除任何事件,因为事件本身存在 - 每次组件安装时,它都会为已连接的事件重新分配一个处理程序。

分配的处理程序,以无操作可能是在组件卸载如果你想确保组件取出后,在事件犯规发生火灾时更合理。

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

对于dom事件监听器,这是不同的。

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

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

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

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

相关问题