ReactuseEffect开发模式触发两次原因及解决方法

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《React useEffect 开发模式触发两次原因及解决方法》，涉及到，有需要的可以收藏一下

React 18 开发模式下，StrictMode 会故意双倍执行 useEffect（包括挂载/卸载模拟），这是为检测副作用不纯问题而设计的调试机制，并非 Bug；生产构建中不会发生。

在你提供的计时器代码中，useEffect 看似“每秒触发两次”，实则是 React 18 的 StrictMode 双重渲染（Double Invoking） 行为所致——它会在开发环境（npm run dev）中自动对组件的挂载、更新和卸载过程进行两次调用，以帮助开发者提前发现副作用中的潜在问题（例如未清理的定时器、重复初始化、状态竞态等）。

这与你是否添加 timer != null 条件无关。无论条件如何，只要组件处于 包裹下（现代 Next.js / Create React App 默认启用），useEffect 的回调函数在开发阶段就会被调用两次（首次挂载时执行 → 清理 → 再次挂载并执行）。你观察到的 "proccccccccccccc" 日志输出两次，正是这一机制的直观体现。

✅ 正确理解关键点：

• ❌ 不是 timer != null 导致重复执行；
• ✅ 是 StrictMode 在开发模式下的预期行为；
• ✅ 生产构建（next build && next start 或 npm run build && npm run preview）中完全不会发生；
• ✅ 该机制仅影响开发体验，不影响最终用户行为。

? 解决方案（按推荐顺序）：

1. 无需修改逻辑 —— 接受并适配 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]);

2. 移除 StrictMode（不推荐，仅用于调试）
   若需临时关闭（如快速验证逻辑），可在 app/root.tsx（Next.js App Router）或 index.js 中删去 标签：

   // ⚠️ 仅限学习/调试，勿用于生产
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <Home /> // 而非 <React.StrictMode><Home /></React.StrictMode>
   );

3. 避免在 effect 中执行不可重复操作
   如需打印日志调试，建议加防抖或仅在特定条件下输出（如 timer === 0），而非依赖执行次数判断流程。

? 总结：这不是 bug，而是 React 主动提供的“副作用健康检查”。真正需要关注的是——你的 effect 是否在重复执行时仍保持健壮？你的清理逻辑是否完备？只要答案是肯定的，就无需担忧双触发现象。保持 StrictMode 启用，是迈向高质量 React 应用的重要一步。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。