运行长异步任务时，React 本机交互会冻结

Question

异步函数

我有一个异步函数，可以循环我提供的链接并获取它们。可能有数百个链接。

const fetchLinks = async (links) => {
    const results = [];
    for (link of links) {
        const res = await axios.get(link);
        results.push(res);
    }
    return results;
}

运行此命令几乎会阻止页面之间的导航。

Android 原生模块

然后我尝试使用这个guide为Android创建一个本机模块。但这完全冻结了导航，直到该过程完成，我什至在调用模块时都没有等待。

发生这种情况时，页面仍然可以滚动，只需单击按钮或导航就会被冻结。

解决这个问题的最佳方法是什么？

Answer 1

您可能阻塞了 javascript 线程。 Scrollview 存在于本机线程上，而按钮则存在于 javascript 线程上，这就是按钮冻结的原因。 我相信并发网络请求是有限制的，这就是它阻塞线程的原因。 您可以尝试使用 Promise.all 并行运行请求，而不是顺序运行。我不确定它是否能完全解决问题，但应该会好得多。

const fetchLinks = async (links) => {
    const promises = links.map(link => axios.get(link));
    return Promise.all(promises);
};