React 18项目中所有Console.log执行两次的问题求助

问题原因解析 #

你在React 18.2.0项目里遇到的useEffect([])、useMemo重复执行两次的情况，是开发模式下Strict Mode的默认行为，这是React 18新增的特性，目的是帮你提前排查组件中可能存在的副作用问题——比如未正确清理的订阅、重复创建的全局资源等。在生产模式下，这个重复执行的逻辑会自动消失，所有副作用都会只执行一次。

而React 16.14.0的Strict Mode没有这个重复执行的检测逻辑，所以componentDidMount只会执行一次。

解决方法 #

• 开发阶段无需过度在意：如果只是日志重复显示，不需要修改代码，这是正常的检测机制，生产环境会恢复单次执行。
• 临时关闭Strict Mode（不推荐长期使用）：找到项目入口文件（比如index.js），移除包裹<App />的<React.StrictMode>标签，就能让副作用在开发模式下只执行一次。但要注意，Strict Mode能帮你提前发现很多潜在bug，长期关闭会损失这个排查能力。
• 适配Strict Mode的检测：确保你的副作用逻辑是幂等的（多次执行结果一致），比如API请求可以做防抖/重复请求拦截，资源创建逻辑要配合清理函数（useEffect的返回值），这样即使重复执行也不会产生异常。

两者对比：componentDidMount vs useEffect([]) #

在React 18的生产模式下，依赖数组为空的useEffect和类组件的componentDidMount执行时机、次数完全一致，不存在谁更优的说法。它们只是不同组件范式下的等价方案：componentDidMount是类组件的生命周期钩子，useEffect是函数组件的标准化副作用处理API，功能上没有本质区别。

内容的提问来源于stack exchange，提问作者adnan tariq