React中useEffect未触发时控制台日志为何打印两次？
2026-8-18
为什么你的React useEffect会打印两次日志？
你提到“即便useEffect未被调用”其实是误解——你的useEffect实际上被调用了两次，这是React 18+开发模式下的默认调试行为，和StrictMode（严格模式）有关。
具体原因：
- React 18在开发环境中开启StrictMode后，会刻意重复执行一批与组件挂载相关的逻辑，目的是帮你提前发现副作用里的潜在问题，比如未清理的订阅、重复创建的定时器等。
- 这些会被重复执行的逻辑包括：组件渲染函数、
useState初始化函数，以及useEffect的回调函数。 - 你的代码里，初始
count值为0，useEffect的依赖数组包含count，第一次挂载时执行一次；StrictMode触发组件二次渲染，此时count没有变化，依赖数组依旧是[0]，但StrictMode会强制再次执行useEffect，所以控制台就打印了两次"test"。
应对方式：
- 生产环境自动消失：当你打包项目部署到生产环境后，StrictMode会被自动禁用，
useEffect只会执行一次。 - 开发环境可手动关闭：如果觉得这个行为干扰调试，可以找到项目入口文件（通常是
index.js或main.jsx），把包裹根组件的<StrictMode>标签删掉，开发模式下就只会执行一次useEffect了。
额外提醒：
这种重复执行是React的调试机制，用来检测非幂等的副作用（执行多次会出问题的逻辑）。如果你的副作用是幂等的（比如单纯打印日志、状态同步这类操作），完全不用在意这个现象；如果出现了异常，正好可以借此排查并修复问题。
内容的提问来源于stack exchange，提问作者Sarah
相关产品推荐
相关产品推荐
