javascript - ReactJS 中的异步函数阻塞组件

Question

在 ReactJs 应用程序中，我有一个组件正在执行一些繁重的计算，并希望在这些计算完成时显示加载 gif。我尝试通过以下两种方式在组件中创建异步函数：

compute = async (data)=>{
    var promise = new Promise((resolve, reject)=> {
          var tensor =  tf.tensor(tokens, [1,100])
          console.log("start prediction")
          var prediction=this.model.predict(tensor); // this is the heavy computation
          prediction.data().then((result)=>resolve(result))     
      });
    return promise 
}

compute = async (data)=>{
    var tensor =  tf.tensor(tokens, [1,100])
    console.log("start prediction")
    var prediction=this.model.predict(tensor); // this is the heavy computation
    return prediction.data()  
} 

当用户单击按钮时调用此函数：

onClickCompute=()=>{
    this.setState({ loading: true },()=>{
        this.compute(data).then((data)=>{
          this.setState({result:data,loading:false})
        })
     });
}

我的问题是（对于异步函数的两个版本），当计算完成时，应该显示的 gif 被冻结并且不显示动画。我假设异步模式足以在后台执行计算而不会阻塞 DOM。

如果不是这种情况，我该如何解决我的问题？我需要将计算放在单独的工作人员中吗？

标签： javascriptreactjsasynchronous