React JS异步重计算

Question

我想在JavaScript中进行一些重型计算。目前，我使用React和Redux。

使用fetch或jQuery ajax等库进行请求会像预期的那样异步工作，但是我无法使用自己的JavaScript函数在客户端上执行异步计算。

在React组件componentDidMount函数中使用setTimeout这样的方法会阻塞我的用户界面：

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界面会冻结直到计算完成。

也许我应该使用Web Workers或其他方法来处理，因为我无法通过setTimeout释放UI线程。

- Agon Lohaj

Answer 1

Javascript是单线程的，通常运行在UI线程中。 setTimeout不会在后台线程中运行代码，因此它运行的任何内容都会阻塞您的UI。

要处理大量工作，您需要使用Web Worker（在单独的非UI线程中运行），或者将您的工作分成较小的块，并且通过使用setTimeout或requestIdleCallback在一段时间内分散执行每个块来进行处理。

- Macil

---

是的，我认为你是对的。我正在阅读关于这个问题的资料，我的解决方法是使用 Web Workers。 - Agon Lohaj