React中useEffect异常行为疑问：count值为何不符合预期？

你的问题核心是React开发环境下的Strict Mode特性——它会刻意重复执行组件函数、useEffect回调等操作，用于检测代码中的不纯逻辑或未正确清理的副作用，这些重复行为在生产环境中完全不会出现。

第一个场景：count显示为2而非1的执行流程 #

1. 组件首次渲染，count初始值为0。
2. 空依赖的useEffect在组件挂载时执行，调用setCount(count => count + 1)，count更新为1，触发组件重新渲染。
3. 由于Strict Mode的开发环境机制，React会模拟组件卸载后重新挂载，因此这个空依赖的useEffect会被再次执行：
   • 此时count当前值是1，执行setCount(count => count + 1)后，count更新为2，组件再次渲染。
4. 最终页面显示count=2，但生产环境下只会执行一次useEffect，count会是预期的1。

第二个场景：控制台输出0、0、2的执行流程 #

1. 第一次组件渲染：count=0，两个useEffect被调度执行。
   • 第一个空依赖useEffect执行：setCount将count更新为1，触发重新渲染。
   • 第二个依赖[count]的useEffect执行：此时依赖的count是0，控制台输出第一个0。
2. Strict Mode触发重复挂载：React模拟卸载组件后重新挂载，组件再次以count=0初始化。
   • 第一个空依赖useEffect再次执行：setCount将count更新为1，触发重新渲染。
   • 第二个依赖[count]的useEffect执行：此时依赖的count还是0，控制台输出第二个0。
3. 第三次组件渲染：经过两次setCount调用，count最终变为2，第二个useEffect因依赖count=2触发执行，控制台输出2。

验证方法 #

你可以暂时关闭Strict Mode（移除项目index.js中包裹App的<React.StrictMode>标签），重新运行代码：

• 第一个场景的count会显示预期的1。
• 第二个场景的控制台只会输出0和1（对应初始渲染和第一次更新）。

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