在 React 中，使用 useRef 获取 DOM 元素并动态绑定/解绑事件时，若直接在清理函数中访问 ref.current，可能因元素已卸载导致 null 而无法成功移除监听器；正确做法是在 useEffect 中缓存对 DOM 元素的引用，并将其加入依赖数组确保清理逻辑可靠执行。
在 react 中，使用 `useref` 获取 dom 元素并动态绑定/解绑事件时，若直接在清理函数中访问 `ref.current`，可能因元素已卸载导致 `null` 而无法成功移除监听器；正确做法是在 `useeffect` 中缓存对 dom 元素的引用，并将其加入依赖数组确保清理逻辑可靠执行。
在实际开发中，我们常需为动态渲染的 DOM 元素（如模态框内的
✅ 正确实践是：在 useEffect 的主逻辑中立即捕获当前 DOM 引用，并在清理函数中复用该引用：
useEffect(() => {
const handleLoadedMetaData = () => {
console.log('Video metadata loaded');
// 执行初始化逻辑，如自动播放、设置时间点等
};
// ✅ 关键：缓存当前 video 元素引用
const element = videoRef.current;
if (element) {
element.addEventListener('loadedmetadata', handleLoadedMetaData);
}
// ✅ 清理时复用同一 element 引用，确保移除有效
return () => {
if (element) {
element.removeEventListener('loadedmetadata', handleLoadedMetaData);
}
};
}, [isOpen, videoRef.current]); // ? 必须将 videoRef.current 加入依赖项
⚠️ 注意事项：
- 依赖数组必须包含 videoRef.current：否则 useEffect 不会在 videoRef.current 变化时重新执行（例如 Modal 打开后 ref 才被赋值），导致监听器未及时绑定或清理时机错位；
- 避免在回调中闭包旧 ref.current：不要写成 videoRef.current?.addEventListener(...) 后又在 return 中再次读取 videoRef.current，两次读取可能返回不同值（尤其在异步或快速开关场景下）；
- 若 handleLoadedMetaData 依赖组件状态（如 isOpen 或其他 useState 值），建议配合 useCallback 稳定其引用，或将其加入依赖数组以避免 stale closure 问题；
- 对于频繁开关的模态框，可进一步结合 if (element && isOpen) 条件控制监听逻辑，提升健壮性。
总结：ref.current 是瞬态值，不可跨执行周期信任。始终“先取后用”，将 DOM 元素缓存为局部常量，并让 useEffect 的依赖数组真实反映其生命周期变化——这是保障事件监听器安全注册与精准销毁的核心原则。
