页面可见性与组件生命周期需协同：用visibilitychange响应全局状态，在挂载时注册监听并启动定时器，隐藏时暂停、显示时恢复，卸载时彻底清理；仅靠生命周期无法覆盖标签页切换等场景。
页面可见性与组件生命周期结合，核心在于：用 visibilitychange 事件响应全局页面状态变化，再在组件挂载、更新、卸载阶段做好定时器的注册、暂停、恢复与清理。两者不是替代关系，而是协同配合——生命周期管“组件自身存在周期”，Page Visibility 管“用户是否真正在看这个页面”。
挂载时注册 visibilitychange 并初始化定时器
组件首次渲染后，应立即监听页面可见性变化，并启动初始定时任务（如轮询、动画）。
- 在
useEffect（函数组件）或componentDidMount（类组件）中绑定document.addEventListener('visibilitychange', handler) - 同时启动关键定时器（如
setInterval或requestAnimationFrame），并将 ID 存入可追踪结构（如ref、useState或WeakMap） - 避免在
constructor或组件顶层声明定时器，防止未挂载就执行或内存泄漏
隐藏/显示时统一暂停与恢复逻辑
不要把暂停/恢复逻辑写死在每个定时器内部，而应在 visibilitychange 回调中集中控制。
- 当
document.visibilityState === 'hidden'时，遍历所有已存的定时器 ID，依次调用clearInterval、clearTimeout或cancelAnimationFrame - 当切回
'visible'时，根据业务需要决定是否重启：高频轮询建议重启，日志上报可延后批量提交 - 注意：不要在
hidden状态下简单设为null就完事，要保留原始配置（如间隔时间、回调函数），便于后续恢复
卸载前必须清空所有残留定时器
组件销毁时，visibilitychange 监听器可能还在，但组件已不存在，容易导致报错或内存泄漏。
- 在
useEffect的清理函数中，主动移除visibilitychange监听器，并清除所有已知定时器 - 类组件中，在
componentWillUnmount或beforeunload事件中做同样处理 - 推荐使用
WeakMap关联组件实例与定时器 ID，确保组件卸载后引用自动释放
补充：为什么不能只靠生命周期？
单纯依赖 useEffect 的清理逻辑无法覆盖标签页切换场景——组件没卸载，只是不可见了，定时器仍在后台跑。
-
componentDidMount / useEffect只触发一次，不响应后续可见性变化 -
visibilityState能捕获标签页切换、窗口最小化、锁屏等行为；而blur/focus在 Chrome 新标签页或 iOS Safari 后台常失效 - 但要注意：iOS Safari 后台 tab 中
visibilityState可能卡在'visible'，所以对强保活需求（如语音通话心跳），仍需服务端兜底
