如何让React在JavaScript长任务执行过程中触发多次重渲染？

我太懂你遇到的这个坑了——在异步长任务里连续调用setState，本以为每一次都会更新UI，结果非要等整个任务跑完才一次性刷新。这事儿其实和JavaScript的单线程特性、React的批量更新策略都有关系，咱们一步步拆解解决。

问题到底出在哪？ #

JavaScript是单线程的，像doMuchWork()这种同步长任务会死死占住主线程，导致React的渲染任务（属于事件循环里的宏/微任务队列）根本没机会插队执行。哪怕你用await包裹了setStatePromise，但setState本身是异步的，再加上React在合成事件、异步函数里会自动批量处理状态更新，多重因素叠加下来，所有UI更新就都被推迟到任务结束后了。

解决方案一：拆分长任务，给主线程留喘气的机会 #

最合理的做法是把你的长时同步任务拆成多个小任务，每执行完一小段就主动让出主线程，让React有时间渲染UI。举个例子：

// 把原有的长任务拆成多个小步骤
const doSmallWorkChunk = () => {
  // 只执行原doMuchWork里的一部分逻辑，比如循环100万次而不是1000万次
  for (let i = 0; i < 1000000; i++) {
    // 你的计算逻辑
  }
};

// 用递归分步执行，每步后让出主线程
const runWorkInChunks = async (totalChunks, currentChunk = 0) => {
  if (currentChunk >= totalChunks) return;
  doSmallWorkChunk();
  // 用setTimeout把后续任务推到宏任务队列，让出主线程给React渲染
  await new Promise(resolve => setTimeout(resolve, 0));
  await runWorkInChunks(totalChunks, currentChunk + 1);
};

// 修改你的长任务函数
longRunningTask = async () => {
  await this.setStatePromise({progress: 1});
  await runWorkInChunks(5); // 假设拆成5步执行完原doMuchWork
  await this.setStatePromise({progress: 2});
  await runWorkInChunks(5);
  await this.setStatePromise({progress: 3});
};

解决方案二：用React 18的flushSync强制立即更新 #

如果你已经升级到React 18，可以直接用flushSync绕过批量更新，强制React立刻处理状态变更并渲染。不过这个方法别乱用，频繁强制更新可能会影响性能：

import { flushSync } from 'react-dom';

// 修改你的setStatePromise
setStatePromise = (state) => new Promise(resolve => {
  flushSync(() => {
    this.setState(state);
  });
  resolve();
});

聊聊你之前的临时解决方法 #

你用setTimeout(() => resolve(), 1)的思路其实是对的——把resolve放到宏任务队列里，相当于主动让出主线程，让React有机会完成渲染。这个方法能解决问题，但如果你的长任务本身可以拆分，优先拆分任务会更优雅，也更符合性能优化的原则。

最后总结一下 #

• 核心问题：长时同步任务阻塞主线程，React没机会及时执行渲染
• 最优解：拆分长任务为小步骤，分步执行并主动让出主线程
• React 18+专属：用flushSync强制立即更新，但需注意性能损耗

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