组件卸载时必须清理事件监听器，核心是用同一函数引用添加和移除，React用useEffect返回函数、Vue用onBeforeUnmount等钩子，全局监听需显式清除，连带清理定时器、请求及SDK资源。
组件卸载后清理事件监听器，核心是确保监听器被及时、准确地移除，避免内存泄漏和意外触发。关键不在于“要不要清”，而在于“怎么清才可靠”。
必须用同一函数引用添加和移除
匿名函数无法被移除，因为每次声明都生成新实例，removeEventListener 找不到匹配项。
- ✅ 正确：把处理函数定义为具名函数、或用
useCallback（React）、methods（Vue）固定引用 - ✅ 示例（React）：
const handleClick = useCallback(() => {}, [])，然后在useEffect清理函数中调用removeEventListener('click', handleClick) - ❌ 错误：
element.addEventListener('click', () => {...})→ 后续removeEventListener无效
在框架卸载钩子中自动执行清理
不要依赖人工记忆，而是把清理逻辑绑定到组件销毁的确定时机。
- React：在
useEffect返回函数中写清除逻辑，它会在组件卸载或依赖变化时自动运行 - Vue 3：使用
onBeforeUnmount（比unmounted更安全，DOM 尚未销毁） - Vue 2：用
beforeDestroy（destroyed已晚，DOM 可能已不可访问） - 原生自定义组件：提供
destroy()方法，由父级统一调用
区分监听目标，按生命周期决定是否手动清理
不是所有监听都需要显式移除，但必须清楚每类的归属关系。
立即学习“Java免费学习笔记（深入）”；
- 绑定在普通 DOM 元素上（如
button.addEventListener）：元素被remove()或替换后，若无其他强引用，通常由垃圾回收自动清理 - 绑定在
window、document、scroll等全局对象上：必须显式removeEventListener，否则永久驻留 - 使用事件总线（如
mitt）：保存off函数或监听 ID，卸载时调用；避免直接removeAllListeners()，可能误伤其他组件
连带清理定时器与异步请求
事件监听器常和副作用共存，漏清一个就可能引发连锁问题。
- 定时器：
useRef存储setTimeout/setIntervalID，卸载时调用clearTimeout/clearInterval - 网络请求：用
AbortController发起，卸载时调用abort()；避免在.then中直接更新状态，先检查组件是否仍挂载 - 第三方 SDK（地图、图表等）：查阅文档，调用其提供的
destroy()、dispose()或remove()方法
