React JS 异步重计算

Question

我正在尝试在 JavaScript 中进行一些繁重的计算。我目前正在使用 React 和 Redux。

使用某些库（如 fetch 或 jQuery ajax 请求进行提取或服务器请求是工作预期的异步，但是我无法进行异步计算在客户端使用我自己的 JavaScript 函数。

像这样使用 setTimeout 在 React 组件 componentDidMount 函数中执行此操作会阻塞我的 UI:

componentDidMount () {
   setTimeout(function() {
      ... do heavy calculations
   }, 0)
}

或在这样的调度操作中（我正在使用 redux-thunk）：

heavyCalculationsAction: () => {
   return dispatch => {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
           ... perform heavy calculations here
           resolve(data)
        }, 0)
      }).then((data) => {
          distpatch(computationsDone(data))
      })
   }
}

在这两种情况下，UI 都会冻结，直到计算完成。

也许我应该通过网络工作者或其他方式来解决这个问题，因为我无法让 setTimeout 释放我的 UI 线程。

Answer 1

Javascript是单线程的，一般在UI线程中有运行s。 setTimeout 不会运行在后台线程中编写代码，因此任何运行都会阻塞您的 UI。

要完成大量工作，您需要使用网络工作者（运行在单独的非 UI 线程中），或者您需要将工作分解成更小的块，并且通过使用 setTimeout 或 requestIdleCallback 来安排每个块，一次只做一点点。

React JS 异步重计算

React JS asynchronous heavy calculations

javascript

asynchronous

reactjs

redux-thunk

react-redux