React开发环境中数组控制台输出4次是否为StrictMode正常行为？

你的判断完全正确，开发环境下控制台打印4次内容是React 18严格模式（StrictMode）的预期正常行为，生产环境构建后不会出现该重复执行现象。

4次打印的对应触发逻辑 #

我们逐次对应每一次打印的触发时机，完全匹配严格模式的开发环境校验规则：

• 第1次打印：组件首次初始渲染，此时users是useState初始化的空数组[]。
• 第2次打印：严格模式为了校验副作用逻辑可靠性，会对新挂载组件执行「挂载→模拟卸载→重新挂载」的流程，重新挂载时的初始渲染会再次打印空数组[]。
• 第3次打印：首次挂载时空依赖的useEffect执行，触发的第一个fetch请求返回结果，调用setUsers更新状态触发重渲染，此时打印接口返回的用户数组。
• 第4次打印：模拟重新挂载时空依赖的useEffect会被再次执行，触发的第二个fetch请求返回结果，再次调用setUsers触发重渲染，打印接口返回的用户数组。

补充说明 #

• 严格模式的副作用双调用机制仅在开发环境生效，目的是提前暴露未做清理的副作用bug，生产环境构建后空依赖的useEffect只会执行一次，最终仅会触发2次打印：首次初始渲染的空数组、请求返回后的用户列表。
• 不需要为了消除开发环境的重复打印特意给请求加中断逻辑，只要你的副作用本身符合React规范、写了必要的清理函数即可，开发环境的重复执行不会影响生产环境的表现。

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