React Strict Mode 下 useEffect 为什么会执行两次？

慕容梓晨提问于 2026-03-02 17:50:20 阅读 35

框架

我在开发时开启了 React 的 Strict Mode，结果发现 useEffect 里的逻辑执行了两次，明明只渲染了一次组件。这是正常现象吗？会不会影响生产环境？

我试过把依赖数组清空，也试过移除 Strict Mode，确实只有在 Strict Mode 下才会双触发。下面是我的代码：

useEffect(() => {
  console.log('副作用执行了');
  // 模拟数据请求或初始化操作
}, []);

我来解答赞 10 收藏

反馈

2 条解答

UE丶玉鑫 Lv1

这事儿我之前也踩过，确实挺膈应的。

先说结论：这是 React 18 的正常行为，不是 bug。Strict Mode 在开发环境下会故意让你的组件挂载两次、卸载两次、再挂载，用来检测你的副作用代码是否正确清理。

原理很简单，React 18 引入了一个「开发者辅助」机制：它会在第一次挂载后模拟一次「意外卸载」，然后立刻重新挂载。如果你写在 useEffect 里的代码没有返回 cleanup 函数，或者 cleanup 写得有问题（比如事件监听没移除、定时器没清理、请求没取消），这时候就能暴露出来。

说人话就是：React 在帮你检查「如果用户离开页面，你的副作用会不会留下内存泄漏或者副作用残留」。很多同学写 useEffect 时忘了 return cleanup，或者 cleanup 写错了，这个双挂载机制能帮你提前发现。

至于会不会影响生产环境——不会。生产环境下组件只挂载一次，只有开发环境+Strict Mode 才会这样。

解决方案其实就一条：确保你的 useEffect 里有正确的 cleanup。比如你代码里是模拟请求，那就应该这样写：

useEffect(() => {

  console.log('副作用执行了');

  

  // 你的初始化逻辑

  

  return () => {

    console.log('清理函数执行了');

    // 在这里清理：取消请求、移除监听器、清除定时器等

  };

}, []);

如果你确实没有需要清理的东西，也不用硬加 return，但最好加上注释说明为什么不需要清理，方便以后维护的人（可能就是你自己）看得懂。

2026-03-20 08:27

Air-欣龙 Lv1

这是 React 18 的预期行为，不是 bug，别慌。

Strict Mode 在开发环境下会故意把组件挂载、卸载、再挂载一次，目的是帮你检测副作用是否写得干净。React 官方这么设计是为了让你早点发现潜在问题，比如订阅没取消、定时器没清理，这些在生产环境可能会导致内存泄漏。

生产环境不会有这个问题，Strict Mode 的这些额外渲染只在开发模式下生效，打包上线后完全不会触发，性能零影响。

你现在的代码其实没问题，但如果你在 useEffect 里做了真实的数据请求或者订阅，记得把清理函数写好，这样即使被卸载重挂载也不会出问题：

useEffect(() => {

  console.log('副作用执行了');

  

  // 比如订阅事件

  const subscription = someAPI.subscribe();

  

  // 清理函数必须返回，卸载时会自动调用

  return () => {

    subscription.unsubscribe();

  };

}, []);

清理函数写好了，Strict Mode 怎么折腾都不怕。其实这个机制挺好的，相当于免费帮你做了一次压力测试，能让你在开发阶段就发现那些"只挂载不卸载"的隐患代码。

如果你实在觉得控制台日志烦人，可以加个环境变量判断，或者干脆接受这个设定，毕竟它是在帮你排查问题。不建议为了省事关掉 Strict Mode，那等于放弃了一个免费的代码质量检测工具。

2026-03-02 18:17