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

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

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

解决方法

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

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