核心是用ispaused布尔变量控制定时器更新逻辑，结合starttime和pausedduration时间戳实现精准计时；ui同步切换按钮状态与图标，组件卸载时清除定时器防止泄漏。
核心在于用一个状态变量记录当前是否暂停，并在定时器回调中根据状态决定是否更新时间。
用变量控制计时状态
定义一个布尔值 isPaused，初始为 false。每次点击“暂停”就设为 true，“恢复”则设为 false。定时器（如 setInterval）持续运行，但只在 isPaused === false 时才更新倒计时数值或执行逻辑。
- 避免频繁 clearInterval / setInterval 切换，减少误差和内存开销
- 暂停时保留当前剩余时间、已运行时长等数据，不重置
- 恢复后从暂停点继续，时间连续性有保障
保存和恢复关键时间戳
单纯靠变量控制可能因页面失焦、JS 卡顿导致计时不准。更健壮的做法是记录“开始时间”和“累计暂停时长”。每次恢复时，重新计算应减去的暂停时间：
- 启动时记录 startTime = Date.now()
- 每次暂停，累加 pausedDuration += Date.now() - pauseStart
- 每次更新时间，用 elapsed = Date.now() - startTime - pausedDuration
UI 与交互同步处理
按钮文案和禁用状态需实时响应计时器状态：
- 暂停中，“恢复”按钮高亮可点，“暂停”置灰；运行中反之
- 计时数字旁可加小图标（如 ▶️ / ⏸️）直观反馈状态
- 点击暂停后立即冻结显示值，避免视觉跳变
注意生命周期与清理
组件卸载或页面关闭前，务必清除定时器，防止内存泄漏：
- 用 useRef 保存 setInterval 返回的 id
- useEffect 的 cleanup 函数里调用 clearInterval
- 暂停状态下也保留 timerId，仅控制是否更新，不清除
