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>
  )
}

中央处理器

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

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

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