React中setState更新卡顿，pdf-lib重任务场景下进度条仅显示0%和100%如何解决？

核心原因 #

• JS单线程事件循环阻塞：pdf-lib的重计算属于CPU密集型同步任务，会占满浏览器主线程，即使你把setState放到setTimeout回调中，回调也属于宏任务，必须等待当前主线程上的所有同步代码（也就是你的全部重计算逻辑）执行完成后才会触发，所有进度更新的setState都被积压到任务结束后才执行，自然只能看到0%和100%两个状态。
• React批量更新机制：React 18及以上版本默认开启自动批量更新，所有同一事件循环周期内触发的setState会被合并为一次重渲染，即使你在async/await的逻辑中拆分了进度更新，只要更新触发时主线程还被重计算占用，所有更新就会被合并到最后一次执行。
• async/await使用误区：如果pdf-lib的重计算逻辑本身是同步执行的，你只是用async关键字包裹了函数，没有实际的异步IO/延时操作让出线程，函数内部的同步代码依然会完整占用主线程，不会给UI渲染留出执行时间。

可行解决方案 #

方案1：拆分计算任务让出主线程 #

将完整的重计算任务拆分为多个小片段，每执行完一个片段就更新进度，再把下一段计算逻辑放到setTimeout(() => {}, 0)中执行，主动让出主线程给React渲染进度条。示例逻辑：

// 假设需要处理10个PDF页的计算任务
const totalTask = 10;
let currentTask = 0;

const runTask = async () => {
  // 处理当前小片段任务
  await processSinglePdfPage(currentTask);
  // 更新进度
  setProgress(Math.floor((currentTask + 1)/totalTask * 100));
  currentTask++;
  if(currentTask < totalTask) {
    // 下一段任务放到下一个宏任务执行，让出主线程
    setTimeout(runTask, 0);
  }
}
runTask();

方案2：Web Worker后台执行计算 #

把所有pdf-lib的重计算逻辑完全迁移到Web Worker中执行，不占用主线程资源，Worker每完成一段计算就通过postMessage向主线程发送进度，主线程接收消息后直接更新state即可，UI渲染完全不会被阻塞，这是体验最优的方案。

方案3：强制同步刷新渲染 #

如果不想拆分任务，可以在每次更新进度时用flushSync强制React立即同步执行渲染更新，适合小片段计算的场景：

import { flushSync } from 'react-dom';

// 每完成一段计算后调用
flushSync(() => {
  setProgress(prev => prev + 10);
});

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