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

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

框架

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

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

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

我来解答赞 2 收藏

反馈

1 条解答

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