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 完成后再渲染组件。我预料到了。

View 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 组件完成任务必须更快。

View GIF

我尝试过异步调用，并将它们分离到它们自己的挂钩中。没有变化，因为 useEffect 同步执行其回调中的功能。

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

Answer 1

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

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

React 异步渲染带有状态的多个组件

React asynchronously rendering multiple components with states

javascript

asynchronous

gpu

reactjs

gpu.js