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