HTML5多媒体在React/Vue框架中的生命周期管理-H5教程-PHP中文网

html5音视频元素需与组件生命周期严格对齐：react用uselayouteffect+useref确保dom插入后初始化并清理；vue用onmounted/onbeforeunmount配合v-if控制dom存在性；均需手动管理加载、播放、事件监听与资源释放。

html5多媒体在react/vue框架中的生命周期管理

HTML5多媒体（<audio></audio> 和 <video></video>）在 React 或 Vue 中不是普通组件，其生命周期与框架的渲染周期不完全同步——直接用 ref 操作 DOM 元素时，容易遇到元素未挂载、状态不同步、内存泄漏或重复初始化等问题。关键在于：把媒体元素的创建、加载、播放控制、事件监听和销毁，与组件的挂载、更新、卸载严格对齐。

React 中 useLayoutEffect + useRef 精确控制挂载时机

媒体元素需在 DOM 真实插入后立即初始化（如设置 src、预加载、监听 canplay），而 useEffect 在浏览器绘制后执行，可能错过早期事件。useLayoutEffect 在 DOM 更新后、绘制前同步运行，更适合：

用 useRef 保存媒体元素引用，避免每次渲染重建实例
在 useLayoutEffect 中检查 ref 是否存在，再调用 load() 或设置 preload="auto"
在 cleanup 函数中调用 mediaEl.pause()、mediaEl.src = "" 并移除所有事件监听器（如 timeupdate、ended）
若依赖 props（如 src）变化，应在 effect 的依赖数组中包含它，并在 src 变更时重置状态（pause() + load()）

Vue 3 中 onMounted / onBeforeUnmount + v-if 控制 DOM 存在性

Vue 的组合式 API 提供了明确的钩子，但要注意：<video></video> 在 v-if="false" 切换时会彻底销毁 DOM，而 v-show 仅切换 display，媒体状态（如播放位置、缓冲）会被保留。实际使用建议：

在 onMounted 中通过 ref 获取元素，调用 load()，绑定事件（推荐用 addEventListener 而非内联 @timeupdate，便于统一移除）
在 onBeforeUnmount 中暂停、清空 src、移除监听器；若组件可能复用（如路由缓存），还需在 onActivated 中恢复播放状态
避免在模板中直接写 <video :src="src"></video>——这会触发浏览器自动加载，失去控制权；应先设 src=""，待 mounted 后再赋值

跨框架通用：用自定义 Hook / Composable 封装媒体状态机

播放、暂停、静音、时间跳转、加载状态等逻辑高度重复，适合抽离为可复用逻辑单元：

React：封装 useVideoPlayer(ref)，返回 { isPlaying, currentTime, volume, play, pause, seek }，内部管理 timeupdate 节流、waiting/canplay 状态转换
Vue：编写 useAudioPlayer() composable，用 ref 管理播放状态，配合 watch 响应 src 变化，自动处理加载流程
统一处理错误：监听 error 事件，触发重试逻辑或上报，避免媒体元素卡死在 networkState === 0