关键在于确保添加和移除的是同一函数引用，禁用匿名/箭头函数；需同步关闭长连接并清除事件监听器；避免闭包捕获过期上下文，推荐用ref或封装自动清理工具。
在自研全栈组件中，用 removeEventListener 清理异步上传文件的长连接回调，关键在于：**确保添加和移除的是同一个函数引用，且该函数不依赖闭包中的易变状态（如临时 token、动态 URL）**。否则即使调用了 removeEventListener，事件监听器也不会被真正卸载，导致内存泄漏或重复触发。
必须使用具名函数或稳定引用的回调
不能直接传入匿名函数或箭头函数——每次渲染或重试都会生成新函数，removeEventListener 找不到原始监听器：
uploadBtn.addEventListener('upload-success', (e) => { handleSuccess(e.detail) });<br>uploadBtn.removeEventListener('upload-success', (e) => { handleSuccess(e.detail) }); // ❌ 不是同一个函数
✅ 正确写法（复用同一引用）：
const onSuccess = (e) => { handleSuccess(e.detail) };<br>uploadBtn.addEventListener('upload-success', onSuccess);<br>// ...<br>uploadBtn.removeEventListener('upload-success', onSuccess); // ✅ 可成功移除
长连接场景下需绑定生命周期钩子统一清理
文件上传常伴随 SSE（Server-Sent Events）、WebSocket 或 fetch + ReadableStream 长轮询。这些连接本身需手动关闭，而事件监听器只是“接收端”。清理时要同步处理：
- 先调用连接实例的
close()（如sse.close()、ws.close()） - 再移除所有相关自定义事件监听器（
upload-progress、upload-error、upload-complete等） - 推荐在组件
unmounted/destroyed或主动取消上传时集中执行
避免闭包捕获过期上下文（如 this、props、ref）
若监听器内访问了组件实例属性（如 this.uploadId），而组件已销毁，不仅逻辑错乱，还阻止 GC 回收。解决方案：
- 使用
useRef存储可变状态（React）或ref（Vue），监听器内读取current值 - 在移除监听器前，置空相关 ref，切断引用链
- 对 class 组件，可用
isMounted标记（但更推荐函数组件 + useEffect 清理函数）
建议封装成可自动清理的事件注册工具
降低出错概率，例如：
function useUploadEvents(el, events) {<br> const handlers = new Map();<br> <br> const on = (type, handler) => {<br> handlers.set(type, handler);<br> el.addEventListener(type, handler);<br> };<br> <br> const off = () => {<br> for (const [type, handler] of handlers) {<br> el.removeEventListener(type, handler);<br> }<br> handlers.clear();<br> };<br> <br> return { on, off };<br>}<br><br>// 使用：<br>const { on, off } = useUploadEvents(uploadBtn, ['upload-success', 'upload-progress']);<br>on('upload-success', onSuccess);<br>on('upload-progress', onProgress);<br>// 统一卸载<br>return () => off(); 
