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

问题描述

我正在尝试在示例 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>
  )
}

处理器

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 同步执行其回调中的功能。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）