React状态未变更却重复渲染组件的原因咨询

核心机制：React的状态浅比较逻辑 #

React默认通过浅比较判断是否需要触发组件渲染：当调用setState（或setName这类状态更新函数）时，会对比新状态与当前状态的浅值。若完全相等，则跳过渲染流程——这就是案例1中初始状态设为"Joe"后，调用setName("Joe")不会触发渲染的原因。

案例2的特殊情况解析 #

你遇到的“切换到新状态后，第一次设置相同值仍触发渲染”的现象，大概率是React开发环境下严格模式的行为：

• React 18+的严格模式（StrictMode）在开发环境中，会对组件的首次状态变更后的更新进行一次额外的渲染校验，目的是检测未正确清理的副作用（比如未取消的订阅、定时器等）。
• 具体到你的场景：从"Joe"切换到"Jane"完成第一次渲染后，首次调用setName("Jane")时，开发环境的React会触发一次额外渲染来验证状态逻辑，但这仅发生一次；后续再调用相同值的状态更新，因为新旧状态完全一致且校验完成，就会遵循浅比较逻辑跳过渲染。

其他可能的排查方向 #

如果严格模式不是原因，可检查以下点：

• 组件中是否存在useEffect或useLayoutEffect，在状态变为"Jane"后触发了额外的状态更新或DOM操作，间接导致渲染；
• 是否使用了第三方状态管理库，其状态更新逻辑可能绕过React的默认浅比较；
• 确认组件是否为React.memo包裹的纯组件，若自定义了比较函数，可能存在逻辑错误导致误判状态变更。

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