React异步呈现具有状态的多个组件

Question

我正试图在一个示例CRA React项目中使用GPU.js。我试图在CPU&GPU计算，但React"；等待"；使CPU计算在显示所有结果之前完成，尽管它们处于单独的组件中，使用单独的状态。

示例：在同一组件中

function Combined() {
const [gpu, setGpu] = useState('null')
const [cpu, setCpu] = useState('null')
useEffect(() => {
const size = 500
const matrices = generateMatrices(size)
setGpu(gpuMultiplyMatrix(matrices, size))
setCpu(cpuMultiplyMatrix(matrices, size))
}, [])
return (
<div className='App'>
...
<div>{gpu && gpu}</div>
<div>{cpu && cpu}</div>
...
</div>
)
}

在同一组件中，React将等待cpuMultiplyMatrix完成后再渲染该组件。我预料到了。

查看GIF

示例：分离组件

GPU

function GPUOnly() {
const [gpu, setGpu] = useState('null')
useEffect(() => {
const size = 500
const matrices = generateMatrices(size)
gpuMultiplyMatrixAsync(matrices, size).then(result => setGpu(result))
}, [])
return (
<div className='App'>
GPU in separated Component
<div>{gpu && gpu}</div>
<hr />
</div>
)
}

CPU

function CPUOnly() {
const [cpu, setCpu] = useState('null')
useEffect(() => {
const size = 500
const matrices = generateMatrices(size)
cpuMultiplyMatrixAsync(matrices, size).then(result => setCpu(result))
}, [])
return (
<div className='App'>
CPU in separated Component
<div>{cpu && cpu}</div>
<hr />
</div>
)
}

应用

import GPUOnly from './components/GPU'
import CPUOnly from './components/CPU'
function App() {
return (
<>
<GPUOnly />
<CPUOnly />
</>
)
}

尽管被分离，React仍然等待CPU计算完成才能渲染GPU，即使GPU组件完成任务的速度必须更快。

查看GIF

我尝试过异步调用，&把它们分成自己的钩子。由于useEffect同步执行其回调中的函数，因此没有任何更改。

渲染多个组件时，如何实现异步行为？

Answer 1

IF异步调用在后台线程(例如web工作线程(上运行，然后它应该按预期工作，即组件应该独立完成和渲染。仅仅因为API是异步的并不一定保证它们在后台运行。

一个玩具示例显示了你正在寻找的行为在React上确实有效，正如你所描述的那样：https://codesandbox.io/s/cool-pond-s2u1z?file=/src/App.js