React状态与渲染疑问：为何代码中count2的值为4而非2？

初始挂载（开发环境严格模式下） #

1. 组件首次初始化：

   • count1 通过 useState(1) 设为1，count2 的初始值是 count1 + 1，也就是2。
   • 控制台输出 count1: 1、count2: 2，按钮显示 2/1 = 2。

2. 首次 useEffect 执行：

   • React在组件首次渲染后会执行useEffect（依赖count1，首次渲染必然触发）。
   • 调用setCount2((prev) => prev + count1)，其中prev是当前count2的值2，count1是1，计算后count2更新为3，触发组件重新渲染。

3. 严格模式下的重复执行：

   • React 18开发环境的严格模式会模拟组件卸载后重新挂载，以此检测副作用问题。由于你的useEffect没有清理函数，会再次执行：
     • 此时count2已经是3，count1还是1，执行setCount2((prev) => prev + count1)后，count2更新为3 + 1 = 4，组件再次重新渲染。

最终状态 #

此时组件稳定后，count1保持1，count2变为4，按钮显示4/1 = 4，这就是你看到的结果。

补充说明 #

• 如果关闭严格模式（生产环境默认关闭），useEffect只会执行一次，count2最终会是3，按钮显示3。
• useState的初始值只在组件首次挂载时生效，后续重新渲染不会再计算count1 + 1，所以count2不会自动跟随count1变化。

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