React函数组件中无法在卸载阶段移除useRef绑定的EventListener问题咨询

先来说你遇到的两个核心问题：事件监听器无法移除，以及是否需要调用removeEventListener，咱们一个个来拆解解决：

一、为什么removeEventListener不生效？IDE识别异常？ #

你的代码里藏着一个关键细节：handleDrag和handleDrop是组件每次渲染时都会重新创建的新函数。当你在useEffect里添加监听器时，用的是某一次渲染生成的函数引用；但到了清理阶段（组件卸载或useEffect依赖变化重新执行），你调用removeEventListener时用的是当前渲染周期的新函数引用——这两个引用完全不一样，浏览器自然找不到要移除的目标监听器，所以移除操作等于白做。

至于IDE识别removeEventListener异常，大概率是因为dropRef.current的类型不明确（比如用TypeScript但没标注类型），或者IDE无法确定div一定是有效的DOM元素，所以才会提示找不到方法。咱们可以通过空值判断来解决这个疑惑。

修复方案：用useCallback固定函数引用 #

把事件处理函数用useCallback包裹，确保它们在组件生命周期内保持同一个引用，这样添加和移除的就是同一个函数了：

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

const dropRef = useRef(null);

// 用useCallback固定函数引用，依赖数组为空则永远不会重新创建
const handleDrag = useCallback((e) => { 
  console.log("Drag Over detected!"); 
}, []);

const handleDrop = useCallback((e) => { 
  console.log("Drop detected!"); 
}, []);

useEffect(() => {
  const div = dropRef.current;
  // 先判断div是否存在，避免空值报错，同时解决IDE类型疑惑
  if (!div) return;

  div.addEventListener("dragover", handleDrag);
  div.addEventListener("drop", handleDrop);

  return () => {
    div.removeEventListener("dragover", handleDrag);
    div.removeEventListener("drop", handleDrop);
  };
}, [handleDrag, handleDrop]); // 把固定后的函数加入依赖数组

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

二、组件没卸载的话，还需要调用removeEventListener吗？ #

答案是非常有必要，原因有两个：

• 开发模式下，React的严格模式会强制组件渲染两次，如果不清理监听器，会导致同一个DOM元素上绑定多个相同的监听器，触发一次事件就会执行多次回调；
• 哪怕组件目前不会卸载，万一未来你给useEffect添加了其他依赖项，导致useEffect重新执行，旧的监听器如果不清理，会一直堆积在DOM元素上，造成内存泄漏或重复触发的问题。

所以哪怕组件现在不会卸载，保留清理逻辑也是良好的编程习惯，能避免后续维护时踩坑。

内容的提问来源于stack exchange，提问作者Cheang Wai Bin