React函数组件重复设相同状态，为何第二次仍执行组件？
2026-7-17
React状态更新跳过渲染的行为解析
问题场景
- 技术栈：React 18、React-DOM 18，CDN引入Babel，IDE为WebStorm
- 测试组件逻辑：
RecipeTitle组件的input绑定state值title，onChange事件调用setTitle(1) - 观测到的行为：
- 首次触发：
title从0变为1，组件正常重渲染，符合预期 - 第二次触发：
title被设为1（与当前值无变化），组件函数执行但input未触发真实DOM更新 - 第三次及之后触发：组件函数不再执行
- 首次触发：
原因解析
这是React内置的状态更新跳过优化（对应官方文档的「Bailing out of a state update」机制），具体逻辑如下：
- 第二次触发时，React接收到状态更新请求后，会先启动组件渲染流程，在渲染完成后对比新旧状态与虚拟DOM。由于状态值未变化，虚拟DOM也无差异，因此跳过真实DOM的更新——这就是你看到「组件执行但input未重渲染」的原因。
- 经过第二次的渲染验证后，React会缓存「该状态更新无意义」的判断结果。后续再触发相同的状态更新时，就会直接跳过组件的执行流程，避免重复的计算开销。
官方机制说明（翻译自官方文档）
当调用状态更新函数但传入与当前状态完全相同的值时，React会跳过组件及其子组件的渲染。不过在部分场景下，React可能会先执行一次组件渲染，再跳过后续更新——这是因为React需要先完成状态与虚拟DOM的对比，才能确定是否可以安全跳过渲染，这属于React内部的性能优化策略。
性能优化建议
可以通过useMemo缓存组件中无需频繁计算的内容，进一步减少无意义的渲染开销，但核心的状态更新跳过逻辑是React内置的优化行为，无需额外配置即可生效。
内容的提问来源于stack exchange，提问作者Cristian Scalingi
相关产品推荐
相关产品推荐
