Question

在执行计算量大的JS任务时，寻找有关如何保持React Native应用程序UI响应的答案/反馈/建议。

我必须执行JSON字符串信息的解析，这是应用程序设置数据。

我已将其确定为导致应用程序中出现UI垃圾的罪魁祸首。在JS中接收到JSON字符串（这是一个本地加载的文件）之后，我必须通过JSON进行解析以为应用程序构建“内存db”。 Sudo代码如下所示：

function parseSetup(jsonString) {
  var json = JSON.parse(jsonString); //This can take up to 100+ms for a 3MB JSON file

  for (let item of json.items) {
    // Do some parsing
    // Instantiate model objects w/json info
    // could take up to 3000ms
  }

  for (let thing of json.things) {
    // Same as above
  }

  for (let parent of json.parents) {
    //Same as above
    for (let child of parent) {
      //Same as above, but note this is a nested for loop
    }
  }
}

parseSetup，最多可能需要5,000 + ms（5秒）。这锁定了JS线程，这使我的应用程序看起来像被冻结了一样，因为在parseSetup函数之后，本机触摸事件和JS逻辑排队了。输入InteractionManager的runAfterInteraction。我使用runAfterInteraction取得了一些成功，但是基本上我使用runAfterInteraction包装了我拥有的每一行代码。感觉很不对劲，它无法100％正常工作，因为某些被runAfterInteraction打包的功能可能要花费比InteractionManagers.setDeadline所设置的最后期限更长的时间。所以这就是我最终得到的：

function parseSetup(jsonString) {
  var json = JSON.parse(jsonString); //This can take up to 100+ms for a 3MB JSON file
  InteractionManager.setDeadline(30);

  for (let item of json.items) {
    InteractionManager.runAfterInteraction(() => someInnerFunc()); //Could take 50ms
    InteractionManager.runAfterInteraction(() => someOtherFunc());
  }

  for (let thing of json.things) {
    InteractionManager.runAfterInteraction(() => someInnerFunc());
    InteractionManager.runAfterInteraction(() => someOtherFunc());
  }

  for (let parent of json.parents) {
    InteractionManager.runAfterInteraction(() => someInnerFunc());
    InteractionManager.runAfterInteraction(() => someOtherFunc());
    for (let child of parent) {
      InteractionManager.runAfterInteraction(() => someInnerFunc());
      InteractionManager.runAfterInteraction(() => someOtherFunc());
    }
  }

  //Do the above for more JSON keys (50+ more)
}

我是否正确理解，执行时间超过16.67 / ms的任何函数都会阻塞JS线程？

倒数第二个问题：在没有锁定JS线程的情况下，是否有更好的方法来运行这样的长函数？谢谢

Answer 1

您可能想看一下parallel.js。老实说，我从未使用过它，但是看起来很有希望。它使用Web工作者，它们是后台线程，不会占用您的主要js线程。在下载完成之前，您还需要放置诸如Loading组件之类的东西。如果我能得到有效的代码，我会发送给您。

https://parallel.js.org/

Answer 2

有两种解决方法。

使用redux和redux-persist。这些使将javascript对象保存在数据库中。它必须完美解决此问题。
在我看来，移动应用不应运行繁重的任务。构建API服务器，并解析json。移动应用只是显示从API服务器解析的json。

使用React Native

2 个答案: