反応コンポーネントでイベントリスナーを削除できないのはなぜですか？

Question

私は知っていますが、この質問は何度も聞かれました。普通の答えはです。「オリジナルではなくコピーを渡しています」私が間違ったことを理解していない限り、これは私の場合は問題ではありません。私はそれ以外の場合はそれを削除することはできませんので、：{真一度}オプション

const Modal: React.StatelessComponent<Props> = 
({ isOpen, closeModal, closeOnClick = true, style, children }: Props) => { 

    const closeOnEsc: (e: KeyboardEvent) => void = (e: KeyboardEvent) => { 
    e.stopImmediatePropagation(); 
    if (e.keyCode === 27) { 
     closeModal(); 
    } 
    }; 

    if (isOpen) { 
    document.body.classList.add('freezeScroll'); 
    window.addEventListener('keyup', closeOnEsc, { once: true }); 
    return (
     <div className={styles.modal} onClick={closeOnClick ? closeModal : undefined} > 
     <div className={`${styles.modalContent} ${closeOnClick ? styles.clickable : undefined} ${style}`} > 
      {children} 
     </div> 
     </div> 
    ); 
    } 
    document.body.classList.remove('freezeScroll'); 
    window.removeEventListener('keyup', closeOnEsc, { once: true }); 
    return null; 
}; 

私だけ追加しました：

は、私は、次のコードを使用して反応するモーダルを作りました。 モーダルを閉じるとwindow.removeEventListenerが呼び出されますが、イベントリスナーは削除されません。
なぜ誰かが私を助けることができますか？

Answer 1

個人的にSFCのリスナーを手動でバインドしません。あなたが本当にしたい場合は、私はコールバックをリスナーを削除するだけです。コンポーネントはコールバックが呼び出されず、その後、あなたは小さなメモリリークを持ってアンマウントされている場合は、あなたのcloseOnEscコールバックで

、これでwindow.removeEventListener('keyup', closeOnEsc);

問題を追加します。

クラスコンポーネントを使用し、ライフサイクルフックcomponentWillUnmountでリスナーも削除されるようにします。