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

私は、[OK]を添付イベントの除去を心配されていないと思います。

イベントはdom要素ではなくウィンドウに関連付けられているため、この例は興味深いものです。この場合、イベントはネイティブに存在するため、イベントを削除しても問題はありません。コンポーネントがマウントされるたびに、ハンドラがすでにアタッチされているイベントにハンドラを再割り当てします。

ハンドラをno-opに割り当てると、コンポーネントをアンインストールした後にイベントが発生しないようにするために、コンポーネントがアンマウントされた場合に、より合理的です。

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

domイベントリスナーの場合、これは異なります。

反応型アプリケーションは、新しい要素がルータとクライアントのサイドナビゲーションを介して段階的に導入され、その後ユーザーがページを探索する際にアンマウントされるシングルページアプリのように動作するのが一般的です。

要素がDOMから削除される（またはマウント解除される）とき、それに接続されているイベントリスナーを削除することをお勧めします。

イベントリスナーを削除しないと、イベントがメモリを不必要に使い切ってしまう可能性があります。

最新のブラウザでは、ガベージコレクションによってこれを処理することも可能ですが、注意するために余分なステップを踏むことができるときは、ブラウザが何をしているのか気にしません。