Javascript 让我们在长时间运行的任务之间对渲染页作出反应

我有一个长时间运行的Javascript任务。React应在任务之间的几个点上重新启动组件。但它只在整个任务结束时重新启动。如何使React在所有

setState（）调用上重新启动页面

一个简化的例子：

setstatespromise=（state）=>newpromise（resolve=>{
this.setState（state，（）=>resolve（））；
});
longRunningTask=async（）=>{
等待此消息。setStatePromission（{progress:1}）；//未向用户显示
等待工作（）；
等待此消息。setStatePromission（{progress:2}）；//未向用户显示
等待更多的工作（）；
等待此消息。setStatePromise（{progress:3}）；//在完成所有操作后显示给用户
};
onButtonClick=async（）=>{
等待这个。longRunningTask（）；
}

下面是一个显示问题的工作示例：


我以前使用的解决方法是：

setstatespromise=（state）=>newpromise（resolve=>{
this.setState（状态，（）=>{
setTimeout（（）=>resolve（），1）；
});
});
您在
longRunningTask
中没有兑现您的承诺，这是原因之一，但这也行不通。生成器可以解决这个问题，在每次需要时都会产生承诺。
连续调用“Render”方法。
问题在于Javascript是单线程的

doMuchWork中的循环阻塞了主线程（以及UI）


解决这个问题的一个快速方法是将doMuchWork中的算法（如果可能的话）分成步骤/块：，但它有很多缺点

setTimeout允许其他方法等执行其工作（如刷新UI），稍后将回调放入队列中，这就是本主题中给出的setTimeout（…，1000）解决方案运行良好的原因

其他（更好的）方法是使用建议的生成器，或者使用专门创建的Web工作人员来完成此类耗时的工作

.
就是这样。显示的代码应该可以工作。尝试使用生成器函数，看看是否有帮助。可能简化的代码与实际代码不同。有时doMuchWork（）和doEvenMoreWork（）的实现不是异步的。我添加了一个工作示例来说明这个问题。