如何并发加载和呈现数据

Question

我想找到一种方法来用按下按钮加载的数据填充表格。数据是通过处理一堆文件来加载的。加载每一项数据大约需要四分之一秒。

目前，我正在为整个页面使用功能组件，并为状态使用钩子。我想逐个加载和渲染数据，但是当我(用户(开始加载时，应用程序冻结，我无法单击以甚至X退出应用程序。但是，加载后，应用程序将使用收集的数据恢复。

我已经尝试了几种不同的解决方案，我将详细说明每个解决方案失败的原因。

悬念或延迟加载：想法是在准备好后立即加载下一个项目。这些解决方案要求在加载所有数据后同时呈现所有数据。我正在寻找一种在加载时一次渲染每个项目的方法。

生成器/回调：当单击按钮并开始加载数据的功能时，应用程序将冻结，直到加载所有数据。

承诺：我可能用错了。我的印象是每个项目都需要单独的承诺。然后，我将不得不使用上述解决方案之一。

React useEffect：不确定这如何帮助状态更新和重新渲染每个回调。

export function loadTheData(callback) {
for (const file of getFiles()) {
callback(file);
}
}

getFiles 是一个生成器函数。

import React, { useState, useReducer, useCallback, useEffect } from 'react';
import { Button } from '@blueprintjs/core';
import { loadTheData} from '../../actions/data';
import Page from '../common/Page';
export default function MyComp() {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
function loadData() {
if (isLoading) {
return;
}
setIsLoading(true);
loadTheData(item => { // loadTheData is an external function
setData(prevData => [...prevData, item]);
});
setIsLoading(false);
}
return (
<Page>
<Button
onClick={loadData}
loading={isLoading}
/>
<p>{data.length}</p>
</Page>
);
}

我希望 data.length 值会一个接一个地增加，直到我按下按钮后完成，但它被冻结在 0 直到最后它更改为正确的数据长度。loadTheData 函数一次向回调函数提供数据。我知道 loadTheData 函数和代码的其他部分工作正常。我只是不确定如何并发/异步加载和渲染加载的数据。

Answer 1

你的loadTheData函数应该看起来像这样

function loadTheData(cb) {
return Promise.all(getFiles().map(file => api.call().then(cb)))
}

然后在组件中使用它，如下所示

async function loadData() {
if (isLoading) {
return;
}
setIsLoading(true);
await loadTheData(item => { // loadTheData is an external function
setData(prevData => [...prevData, item]);
});
setIsLoading(false);
}

Answer 2

对于任何刚接触Electron的人来说，我最近回到了这个项目，并找到了对我遇到的真正问题的更好定义。

事实证明，主 UI 线程被我的"loadTheData"函数阻止了，并且没有将该函数与 Promise 或其他方式一起使用的替代方法可以改变这一点。

此链接详细介绍了该问题： 电子：阻塞主进程

事实证明，为了"并发加载和呈现一个接一个的数据"，需要按照链接的在线指南中的步骤进行操作。