2017-12-27 507 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(或卸載)中除去,它是以去除附着到其任何事件偵聽器的最佳做法。

如果您不刪除事件偵聽器,則事件可能會不必要地耗盡內存。

它也完全有可能是現代瀏覽器通過垃圾收集處理這個給你,但是爲什麼還要自己知道哪些瀏覽器時,你可以採取什麼額外的步驟要小心。

相關問題