React中useState的setter在同步sleep前调用未生效原因问询

1. React 状态批处理机制 #

React 对同一个同步执行上下文内的多次状态更新默认会做批处理：不会每次调用 setText 就立刻触发重渲染，而是等当前整个同步函数执行完毕后，合并所有状态更新，仅触发一次重渲染。你在 handleUPClick 这个同步函数内先后调用了两次 setText，两次更新会被合并，最终只有最后一次的转大写结果生效，中间的提示状态直接被覆盖，自然不会在页面上显示。

2. JavaScript 单线程与事件循环机制 #

你使用的是同步阻塞式的 sleep 实现，而 JavaScript 是单线程运行的，只要当前同步执行栈的代码没执行完，主线程就会被完全占用，所有其他任务（包括 DOM 渲染、React 状态更新调度、异步回调等）都只能排队等待。你那 2 秒的同步 sleep 直接卡死了主线程，就算 React 想执行重渲染也拿不到主线程资源，自然看不到中间的提示文本。

把第二次状态更新放到异步任务中，让第一次的状态更新先完成渲染即可，同时要注意用函数式更新拿到最新的状态值，避免闭包捕获旧值的问题：

const handleUPClick = async ()=>{
    console.log("Uppercase was clicked " + text);
    setText("Converting to Upper case...");
    // 用异步延时替代同步阻塞sleep
    await new Promise(resolve => setTimeout(resolve, 2000));
    // 函数式更新获取最新的文本内容
    setText(prevText => prevText.toUpperCase());
}

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