如何从ref元素移除EventListener？模态框场景下的移除有效性疑问

场景说明 #

存在一个video元素，点击海报时会在模态框中显示，常规实现代码如下：

const [isOpen, setOpen] = useState(false)
const videoRef = useRef<HTMLVideoElement>(null)

const handleOpenVideo = () => setOpen(true)

...

return (
  <>
    <Modal isOpen={isOpen}>
      <video ref={videoRef} src="..." />
    </Modal>
    <s.Poster onClick={handleOpenVideo}>
      <img src="..." />
    </s.Poster>   
  </>
)

如果要给video绑定loadedmetadata这类事件，常见写法是用useEffect配合ref：

...

useEffect(() => {
  const handleLoadedMetaData = () => { ... }
    
  videoRef.current?.addEventListener('loadedmetadata', handleLoadedMetaData)
    
  return () => {
    videoRef.current?.removeEventListener('loadedmetadata', handleLoadedMetaData)
  }
}, [isOpen])

...

核心疑问 #

执行移除事件监听器时，videoRef.current为null，这是否意味着无法成功移除事件处理函数？

解答 #

首先明确关键逻辑：当isOpen变为false时，Modal组件会卸载内部的video元素（即video标签从DOM树中被移除）。

1. 浏览器自动回收事件监听器
   当DOM元素被销毁（从DOM树中移除）时，浏览器会自动清理该元素上绑定的所有事件监听器，不会造成内存泄漏。所以即使我们的清理函数没执行removeEventListener，也不会有问题。

2. 为什么videoRef.current会是null？
   因为Modal卸载时，内部的video组件被销毁，React会把videoRef.current重置为null，此时清理函数里的videoRef.current?.removeEventListener会因为短路操作不执行，但这完全不影响——对应的DOM元素已经不存在了，它的事件监听器早就被浏览器处理了。

3. 优化写法：用React合成事件替代手动绑定
   其实没必要手动用addEventListener，React提供了合成事件可以直接绑定在元素上，它会自动帮你管理事件的绑定和移除，代码更简洁，也不用依赖ref：

const [isOpen, setOpen] = useState(false)

const handleLoadedMetaData = () => { ... }

const handleOpenVideo = () => setOpen(true)

return (
  <>
    <Modal isOpen={isOpen}>
      <video src="..." onLoadedMetadata={handleLoadedMetaData} />
    </Modal>
    <s.Poster onClick={handleOpenVideo}>
      <img src="..." />
    </s.Poster>   
  </>
)

这种写法下，React会在组件卸载时自动移除事件绑定，完全不用你操心清理的问题。

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