为什么我不能在react组件中删除事件监听器？

Posted 2021-05-03

虽然我知道，这个问题已被多次询问，但通常的答案是“你传递的是副本，而不是原件”。除非我理解错误，否则这不是我的问题。

我使用以下代码在React中创建了一个Modal：

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;
};

我只添加了{once：true}选项，因为我不能删除它。一旦模态关闭，就会调用window.removeEventListener，但它不会删除事件监听器。 任何人都可以帮我找出原因吗？

答案

我不会亲自手动绑定SFC中的侦听器。如果你真的想要，我会让回调删除监听器。

在你的closeOnEsc回调中，添加window.removeEventListener('keyup', closeOnEsc);

这个问题，如果在没有调用回调的情况下卸载组件，那么你的内存泄漏很少。

我将使用类组件，并确保在componentWillUnmount生命周期钩子中也删除了侦听器。