react 18 开发模式下，strictmode 会故意双倍执行 useeffect（包括挂载/卸载模拟），这是为检测副作用不纯问题而设计的调试机制，并非 bug；生产构建中不会发生。
在你提供的计时器代码中，useEffect 看似“每秒触发两次”，实则是 React 18 的 StrictMode 双重渲染（Double Invoking） 行为所致——它会在开发环境（npm run dev）中自动对组件的挂载、更新和卸载过程进行两次调用，以帮助开发者提前发现副作用中的潜在问题（例如未清理的定时器、重复初始化、状态竞态等）。
这与你是否添加 timer != null 条件无关。无论条件如何，只要组件处于
✅ 正确理解关键点：
该系统由帝国开发工作组独立开发，是一个经过完善设计的适用于Linux/windows/Unix等环境下高效的网站解决方案。从帝国新闻系统1.0版至今天的帝国网站管理系统，它的功能进行了数次飞跃性的革新，使得网站的架设与管理变得极其轻松。 它采用了系统模型功能：用户通过此功能可直接在后台扩展与实现各种系统，如产品、房产、供求、等等系统，因此特性，[1] 帝国CMS又被誉为“万能建站工具”；采用了
- ❌ 不是 timer != null 导致重复执行；
- ✅ 是 StrictMode 在开发模式下的预期行为；
- ✅ 生产构建（next build && next start 或 npm run build && npm run preview）中完全不会发生；
- ✅ 该机制仅影响开发体验，不影响最终用户行为。
? 解决方案（按推荐顺序）：
-
无需修改逻辑 —— 接受并适配 StrictMode（最佳实践）
确保所有 useEffect 具备幂等性与可清理性。例如你的定时器已正确使用 clearInterval 和 useRef 保存 ID，这就符合要求。即使 effect 执行两次，也不会造成内存泄漏或逻辑错误：useEffect(() => { if (timer <= 0 && timer !== null) { setTimer(null); clearInterval(intervalId.current); console.log("Timer stopped"); } // ✅ 清理函数自动处理重复挂载场景 return () => clearInterval(intervalId.current); }, [timer]); -
移除 StrictMode（不推荐，仅用于调试）
若需临时关闭（如快速验证逻辑），可在 app/root.tsx（Next.js App Router）或 index.js 中删去标签： // ⚠️ 仅限学习/调试，勿用于生产 ReactDOM.createRoot(document.getElementById('root')!).render( <Home /> // 而非 <React.StrictMode><Home /></React.StrictMode> ); 避免在 effect 中执行不可重复操作
如需打印日志调试，建议加防抖或仅在特定条件下输出（如 timer === 0），而非依赖执行次数判断流程。
? 总结：这不是 bug，而是 React 主动提供的“副作用健康检查”。真正需要关注的是——你的 effect 是否在重复执行时仍保持健壮？你的清理逻辑是否完备？只要答案是肯定的，就无需担忧双触发现象。保持 StrictMode 启用，是迈向高质量 React 应用的重要一步。
