React useState触发重渲染的组件执行逻辑与状态初始化问题

当调用useState返回的更新函数触发重渲染时，整个函数组件的函数体会从头到尾完整重新执行，不存在仅执行部分代码的机制。组件里定义的变量、函数、内部逻辑都会在每次重渲染时重新创建、重新执行，最终返回新的JSX用于DOM对比更新。

这是React对Hooks的内置设计决定的，核心逻辑是：

• React在每个组件实例首次挂载渲染时，会为组件维护一个按Hooks调用顺序排列的内部状态存储队列，每个useState调用对应队列里的一个存储位。
• 首次渲染执行到useState(0)时，React发现当前存储位是空的，才会使用你传入的0作为初始值存入存储位，随后返回这个值和对应的更新函数。
• 后续所有重渲染执行到useState(0)时，React会直接读取对应存储位里已经存好的最新状态值返回，完全忽略你传入的初始值参数——这个初始值参数仅在组件首次挂载的那一次渲染中生效，重渲染阶段传什么都不会覆盖已有状态。

结合你给出的示例代码，完整执行流程是：

1. 组件首次挂载：执行useState(0)，存入初始值0，count拿到0，页面渲染Count = 0
2. 第一次点击p元素触发handleChange，执行setCount(prev => prev+1)，React将对应存储位的状态更新为1，标记组件需要重渲染
3. 重渲染触发，整个MyComponent函数从头重新执行：走到useState(0)时，React直接返回存储位里的最新值1，不会重置为0，count拿到1，页面更新为Count = 1
4. 后续每次点击都会重复状态更新、重渲染的流程，计数器就会正常累加。

补充一个常见的相关注意点：如果初始值需要经过复杂计算才能得到，推荐传初始化函数给useState，比如useState(() => calcVeryExpensiveValue())，这个初始化函数和直接传的初始值一样，只会在组件首次挂载时执行一次，重渲染不会重复执行，能避免不必要的性能损耗。另外这也是为什么React要求Hooks不能写在if判断、循环等条件分支里——React完全靠Hooks的执行顺序匹配对应的状态存储位，顺序一旦错乱，就会拿到错误的状态值。

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