Reactjs 如何延迟CPU密集型任务以允许渲染发生

我有一个React应用程序，其中会发生多个连续的CPU密集型任务。我想跟踪整个运营的进度

类Hello扩展了React.Component{
构造函数（）{
超级（）
此.state={
状态：“未启动”
}
this.handler=this.handler.bind（this）
}
componentDidUpdate（）{
如果（this.state.status==='starting'）{
this.cpuIntensive（）
this.setState（{status:'first task done'}）
}
if（this.state.status===‘第一个任务完成’）{
this.cpuIntensive（）
this.setState（{status:'second task done'}）
}
if（this.state.status===“第二个任务完成”）{
this.cpuIntensive（）
this.setState（{status:'finished'}）
}
}
cpuIntensive（）{
设结果=0
for（vari=Math.pow（7,8）；i>=0；i--）{
结果+=Math.atan（i）*Math.tan（i）；
}
}
handler（）{
this.setState（{status:'starting'}）
}
render（）{
返回(
{this.state.status}
开始
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
您可以在
处理程序中启动操作，并使用
setTimeout（）
链接/允许在这两个操作之间进行渲染。这样，您就不需要使用react状态来启动这些连续操作

另一种选择是使用网络工作者。
谢谢。该操作由用户触发，如代码段中所示。而网络工作者，我想这就是你的意思，不是一个选择。那是我第一次尝试。问题是，在同一方法中多次更新状态。而且
setState
是异步的，因此您必须同时处理
setTimeout
和
setState
的回调。这就是为什么我依赖于
组件diddupdate
。。。但也许这是个坏主意。@mthpvg这取决于你的目标。如果要在开始下一个操作之前强制中间更新以可视化进度，则可以。如果操作足够小，您可以让它做出反应，决定是否要批处理这些状态更改。您是对的，我的目标是强制中间更新以可视化进度。但是没有，这些行动还不够小。所以，你说我的解决方案已经足够了可能是对的，但我希望找到一个更优雅的解决方案：）我认为你的解决方案很好。如果您想让它更优雅，那么创建一个方法，用回调将
setTimeout
封装在一个promise中，并立即解决它怎么样？（你实际上不需要100毫秒的延迟）谢谢@GhassenLouhaichi。你说我不需要100毫秒是什么意思？你认为100ms太长了还是我根本不需要延迟？
setTimeout（（）=>{this.cpuIntensive（）；this.setState（{status:'first task done'}}）对我来说很好（基本上超时为0）。真的，谢谢。我会同意的。