React状态设为相同值引发的渲染异常及相关技术疑问

架构老林

2026-7-17

React中设置相同状态值引发的“伪渲染”问题解析

1. 为何将状态设置为相同值"t"会引发“重渲染”？

这不是完整意义上的重渲染，只是React渲染阶段的执行流程。调用setState时，无论新值是否和旧值一致，React都会先执行组件体代码（计算虚拟DOM），之后对比新旧虚拟DOM发现无差异，就会跳过提交阶段（不更新真实DOM、不触发副作用）。你看到的“重渲染”其实只是组件体代码被执行了，但没有完成真实DOM的更新。

2. 为何组件体中的console.log输出3，但渲染显示的值却是2？

渲染阶段执行组件体时，React会临时将state更新为新值（3），但后续对比发现新值和旧值相同，会回滚这个临时状态变化，最终在提交阶段使用旧的state值（2）渲染真实DOM。所以组件体执行时拿到的是渲染阶段的临时state，页面显示的是最终确认的旧状态值。

3. 为何当组件体日志显示3时，无依赖项的Effect未被触发？

useEffect属于React提交阶段的副作用，只有当React完成真实DOM更新（即状态发生有效变化、虚拟DOM对比存在差异）时才会触发。这里因为状态值未发生实际变化，React跳过了提交阶段，所以Effect不会执行。

4. 这是否意味着直接在组件体中更新ref的值并不安全？

是的，这种做法存在风险。组件体可能会被React重复执行（比如相同状态下的渲染阶段执行、Strict Mode下的双重渲染），直接在组件体中更新ref会导致ref的值被多次修改，出现和真实渲染状态不一致的情况。正确的做法是在useEffect、事件回调或useLayoutEffect中更新ref，或者用useState管理需要跟踪的状态。