asynchronous - React Native 计算繁重的任务

Question

非常简单和常见的用例，但我找不到令人满意的答案。
我有需要在本地存储一些数据的 native 应用程序。我使用 redux 和 redux-observables 以及 Realm 作为存储。

我需要的是:一些 Action 发生，让我们说 ADD_ITEM。我需要使用一些有效负载(标准 redux)更新 UI。然后我想将该有效负载创建/转换为另一条数据并将该数据保存到 Realm(异步)中。无论我尝试什么，它总是滞后于 UI(很多)。

我试图将该 Realm 调用包装到 promise 中并使用 switchMap，但它仍然很慢。

我还没有看过 worker ，但他们只接受字符串，这对我来说不太有用。

我可以将计算完全卸载到 native 后台线程，但这会非常不舒服并且需要大量编写。

异步等待可以帮助我吗？ redux-saga 的？我觉得这是同一件事，而不是真正的异步处理。

还是我为此使用了完全错误的库？

const insertOrderItem = (action$) =>
    action$.ofType(Action.ADD_ORDER_ITEM)
        .switchMap(({ payload }) => Rx.Observable.fromPromise(
            new Promise((resolve, reject) => {
                storage.insert(createObject(payload)
                resolve({
                    type: "OPERATION_ADDED"
                })
            })
        ))

一般来说，将小块数据存储到 Realm 不应该有那么大的计算量，但我觉得有必要在后台线程上做这种工作。

我错过了什么吗？

谢谢

Answer 1

我的应用程序使用 React Native + Realm DB 时遇到了同样的问题。我试了各种方法，不用写native代码，搭建了react-native到native的桥梁，终于找到了解决办法:

https://corbt.com/posts/2015/12/22/breaking-up-heavy-processing-in-react-native.html

安装 npm install next-frame --save .

将下一帧添加到您的代码 import nextFrame from 'next-frame';

在花了很长时间的 for 中添加这一行，或者在 DB await nextFrame(); 中为 which 插入

一个完整的示例如下所示:

import nextFrame from 'next-frame';

let response = await fetch("https://emberall.com/user/1/recordings");
let responseJSON = await response.json();

for (let recording of responseJSON.recordings) {
  await nextFrame(); // The javascript will yield here and not resume execution until the next frame. 
  mergeRecordingToLocalDatabase(recording);
}

基本上它的作用是在每次迭代或 db-insert 中等待 JS 渲染和处理下一个 UI 帧，因此您的应用程序不会卡住或卡住。

P.D.:我知道自从提出问题以来已经过去了几个月，但我认为很多人都可以从中受益。