React Hooks非useEffect函数中调用DOM事件监听器的写法是否存在问题？

现存的核心问题 #

• 重复绑定与监听器残留风险
  handleMyEvent中的监听器绑定逻辑没有做幂等判断：如果handleMyEvent被多次触发（比如作为按钮点击回调被用户重复点击），每次执行都会给DOM元素新增一个mousemove监听器。由于React组件每次重渲染都会生成全新的函数实例，多次绑定的监听器是完全不同的引用，后续在handleMouseEvent中执行removeEventListener时，只能移除最后一次绑定的那个监听器，更早绑定的旧监听器会永久残留在DOM元素上。这些残留的监听器不仅会持有组件旧的闭包引用造成内存泄漏，还会因为重复触发回调、重复执行state更新带来不必要的性能损耗。
• 组件卸载后的清理漏洞
  这种完全写在普通业务函数里的事件绑定，没有和组件生命周期挂钩：如果用户在监听器已经绑定、但还没来得及触发第一次mousemove时就卸载了组件，绑定在DOM（尤其是window、document这类全局不会被回收的节点）上的监听器没有任何机制会被自动清理。闭包会一直持有组件内部的state、props引用，导致组件无法被正常垃圾回收，甚至在后续触发事件时执行已卸载组件的setState，触发React的运行时警告。
• 渲染流程不匹配的引用失效问题
  当前代码能正常运行，本质是刚好绕开了“组件重渲染导致函数引用变化”的场景：如果handleMouseEvent中执行了state更新，会立刻触发组件重渲染，生成全新的handleMouseEvent函数实例。一旦后续DOM元素被React的重渲染逻辑替换（比如条件渲染、列表项重排导致DOM节点重建），之前绑定在旧DOM节点上的监听器就彻底失去了被正确移除的入口，变成永久残留的无效逻辑。
• 示例代码本身存在选择器书写错误：document.querySelector('myDiv')的作用是选中标签名为myDiv的DOM节点，如果目标元素是id为myDiv的普通div，应该写成document.querySelector('#myDiv')才能正确选中。

为什么当前代码可以正常运行 #

这种写法能跑通的前提非常脆弱：handleMyEvent仅被触发一次、绑定监听器后马上就会触发mousemove完成移除、绑定到移除的全流程中没有触发组件重渲染、没有发生组件卸载、没有DOM节点被替换的场景。只要后续业务逻辑有一点改动，上述所有隐患都会随机出现。

改进方向 #

所有涉及和DOM强绑定、需要关联组件生命周期的事件逻辑，都应该放在useEffect中声明，通过effect自带的清理函数在组件重渲染、卸载时自动移除旧监听器，从根源上避免引用不匹配、清理遗漏的问题；如果确实需要在普通业务函数中做一次性事件绑定，需要给事件处理函数加上稳定的引用（通过useCallback包裹），增加重复绑定的判断逻辑，同时兜底在组件卸载时执行一次监听器移除操作。

内容的提问来源于stack exchange，提问作者Maverick088