React未渲染最新状态问题及渲染时机相关疑问

这个问题其实涉及到React的两个核心机制：批量更新策略和状态的浅比较规则，我们一步步拆解清楚：

1. 为什么console.log(1)后会触发渲染？ #

React默认在合成事件（比如按钮的onClick）、生命周期钩子中开启批量更新——也就是多个setState会被合并，只在所有更新执行完后触发一次渲染。但在Promise.then、setTimeout、原生事件这类微/宏任务环境中，React的批量更新机制会失效，每个setState都会单独触发状态更新和渲染流程。

所以你在console.log(1)后执行第一次setState，会立即触发渲染，这就是为什么控制台紧接着输出了render {a: 1}。如果去掉Promise.resolve()，代码在合成事件中执行，所有setState会被批量处理，只会在最后触发一次渲染。

2. 页面显示与DevTools不一致的核心原因 #

你所有的setState都复用了同一个对象引用_state，这才是问题的关键：

完整执行流程拆解： #

• 点击按钮进入Promise.then回调，创建_state = {a:1}。
• 执行console.log("1") → 输出1。
• 第一次setState(_state)：批量更新失效，React立即将状态指向这个对象，并触发异步渲染任务（加入任务队列）。
• 回到回调，执行console.log("2") → 输出2。
• 修改_state.a = 2：由于_state和组件状态是同一个对象，此时组件状态的a已经变成2，但之前的渲染任务还没执行。
• 第二次setState(_state)：React做浅比较时发现新状态和旧状态是同一个对象，理论上不会触发渲染，但因为在微任务中批量更新失效，还是会尝试触发一次更新流程，所以控制台输出render {a:2}，同样加入任务队列。
• 执行console.log("3") → 输出3。
• 修改_state.a = 3：组件状态的a再次变成3。
• 第三次setState(_state)：浅比较发现对象引用相同，React直接忽略这次更新，不触发渲染。

显示差异的原因： #

• 页面最终显示{a:1}：React会合并排队的渲染任务，但由于所有更新都复用同一个对象，React无法识别出有效的状态变化，最终只执行了第一次渲染的结果（此时页面读取的是当时的state.a=1）。
• DevTools显示{a:3}：DevTools是实时读取状态对象的当前值，而你已经多次修改了这个对象的a属性，所以会显示最新的3。

3. 解决方法 #

要修复这个问题，你需要确保每次setState都传入新的对象引用，让React的浅比较能识别出状态变化：

方案1：每次创建新对象 #

const handleClick = () => {
  Promise.resolve().then(() => {
    console.log("1");
    setState({ a: 1 });
    console.log("2");
    setState({ a: 2 });
    console.log("3");
    setState({ a: 3 });
  });
};

方案2：使用函数式更新（更可靠，尤其依赖前一次状态时） #

const handleClick = () => {
  Promise.resolve().then(() => {
    console.log("1");
    setState(prev => ({ ...prev, a: 1 }));
    console.log("2");
    setState(prev => ({ ...prev, a: 2 }));
    console.log("3");
    setState(prev => ({ ...prev, a: 3 }));
  });
};

这样修改后，每次setState都传入新对象，React会正确触发渲染，最终页面会显示3，控制台的渲染输出也会匹配状态变化。

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