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

Question

我有一个基于下拉列表组件open渲染的Backdrop_DIV。

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

我希望如果用户滚动(touchmove(，Backdrop_DIV消失。

Obs：这是一个移动视图。

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时尝试清除事件侦听器时失败.有没有办法做到这一点？

错误：

react-dom.development.js：20313 uncatch 类型错误：无法读取 null 的属性"removeEventListener">

此错误非常明显，因为Backdrop_DIV在运行时不再挂载。

问题

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

Answer 1

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

如果删除了 DOM 元素，它的侦听器是否也会从内存中删除？

而且，我找到了一种在卸载Backdrop_DIV之前删除侦听器的方法，它可以工作：

• 我添加了一个lastOpenState_refuseRef()来跟踪以前的渲染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>
);
}