无法卸载useEffect中的useRef eventListener

Question

我正在尝试创建一个拖放上载div。我正在跟踪一个引用链接，该链接在类组件卸载阶段演示了removeEventListener。

为什么我不能在带有功能组件的卸载阶段删除事件侦听器？ide似乎也没有识别出removeEventListener函数。我做错了什么？

我真的必须删除EventListener吗，因为组件在整个生命周期中似乎没有卸载？

const dropRef = useRef(null);
const handleDrag = (e) => {
console.log("Drag Over detected!");
};
const handleDrop = (e) => {
console.log("Drop detected!");
};
useEffect(() => {
const div = dropRef.current;
div.addEventListener("dragover", handleDrag);
div.addEventListener("drop", handleDrop);
return () => {
div.removeEventListener("dragover", handleDrag);
div.removeEventListener("drop", handleDrop);
};
}, []);

<div className="uploadBox" ref={dropRef}></div>

Answer 1

效果挂钩可以在功能组件中执行副作用：

您没有将任何依赖项传递给useEffect，这意味着useEffect只运行一次(在页面呈现时(。

你要运行它，你需要定义这个useEffect运行时的依赖关系，在您的情况下，将div作为依赖项传递应该有效。

useEffect(() => {
const div = dropRef.current;
div.addEventListener("dragover", handleDrag);
div.addEventListener("drop", handleDrop);
return () => {
div.removeEventListener("dragover", handleDrag);
div.removeEventListener("drop", handleDrop);
};
}, [div]);

Answer 2

// Declare a static listener.
const eventListeners = useRef();
// now let's create our scroll Handler
const scrollHandler = useCallback(() => {...},[]);
useEffect(() => {
// Here will be removing the static listener and then updated it for 
// our new one since the first time will be empty it won't do anything.
window.removeEventListener('scroll', eventListeners.current, true);
// Then will set our current scroll handler to our static listener
eventListeners.current = scrollHandler;
// Here will be adding the static listener so we can keep the reference
// and remove it later on
window.addEventListener('scroll', eventListeners.current, true);
},[scrollHandler]);