React JS 异步繁重计算

Question

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

使用诸如 fetch 或 jQuery ajax 请求之类的库执行 fetch 或服务器请求是工作按预期异步的，但是我无法使用我自己的 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 线程中运行。 setTimeout 不在后台线程中运行代码，所以它运行的任何东西都会阻塞你的 UI。

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