如何从正在卸载的背景中删除事件侦听器？

Question

我有一个 Backdrop_DIV，它是基于下拉组件的 open 呈现的。

{open &&
  <LS.Backdrop_DIV
    onClick={handleBackdropClick}
    ref={backdrop_ref}
  >
    Backdrop
  </LS.Backdrop_DIV>
}

我希望 Backdrop_DIV 在用户滚动时消失 (touchmove)。

观测：这是移动视图。

const handleTouchMove = useCallback(()=>{
    setOpen(false);
  },[]);

useEffect(() => {
    if (open) {
      // ATTACHING THE EVENT LISTENR
      backdrop_ref.current.addEventListener('touchmove', handleTouchMove );
    }

    // ATTEMPT TO REMOVE THE EVENT LISTENER
    return () => 
      backdrop_ref.current.removeEventListener('touchmove', handleTouchMove);

},[open,handleScroll]);

它可以工作，但如果在我尝试清除 useEffect 的 return 中的事件侦听器时失败。有办法吗？

错误：

react-dom.development.js:20313 Uncaught TypeError: Cannot read property 'removeEventListener' of null

这个错误很明显，因为 Backdrop_DIV 在运行时不再挂载。

问题

在这种情况下，我需要费心删除事件侦听器吗？我能做什么？

Answer 1

根据 Carlene 在评论中推荐的问题，我会说没有必要删除事件侦听器，因为它将由垃圾收集器处理，尽管某些较旧的浏览器在这种情况下可能会泄漏内存。

If a DOM Element is removed, are its listeners also removed from memory?

而且，我找到了一种在卸载 Backdrop_DIV 之前删除侦听器的方法并且它有效：

我添加了一个 lastOpenState_ref useRef() 来跟踪之前的渲染 open 状态，这样我就可以检测到将卸载 Backdrop_DIV 的渲染（open === false) 然后我在渲染过程中移除了监听器。

import React, {useState, useEffect, useRef, useCallback} from 'react';

function MyComponent() {

  const [open,setOpen] = useState(false);
  const backdrop_ref = useRef(null);
  const lastOpenState_ref = useRef(false);

  const handleBackdropTouchMove = useCallback(() => {
    setOpen(false);
  },[]);

  // BLOCK TO REMOVE EVENT LISTENER FROM backdrop_ref
  // SINCE IT'S IMPOSSIBLE TO REMOVE FROM THE useEffect RETURN
  // BECAUSE THE backdrop_ref IS NULL WHEN IT RUNS

  if (lastOpenState_ref.current === true && open === false) {
    backdrop_ref.current.removeEventListener('touchmove', handleBackdropTouchMove);
  }
  lastOpenState_ref.current = open;

  // EFFECT TO ATTACH 'touchmove' EVENT LISTENER ON 'backdrop_ref.current'

  useEffect(() => {
    if (open) {
      backdrop_ref.current.addEventListener('touchmove', handleBackdropTouchMove);
    }
  },[open,handleBackdropTouchMove]);

  // RETURN STATEMENT

  return(
    <LS.Container_DIV>
      {open &&
        <LS.Backdrop_DIV
          onClick={handleBackdropClick}
          ref={backdrop_ref}
        >
        </LS.Backdrop_DIV>
      }
      <SomeOtherStuff/>
    </LS.Container_DIV>
  );
}

如何从正在卸载的背景中删除事件侦听器？

How to remove event listener from a Backdrop which is being dismounted?

javascript

reactjs

addeventlistener

react-hooks

removeeventlistener