如何让数组中的子组件逐个渲染而非等待全部计算完成？

当前核心问题是B组件的同步耗时计算会阻塞渲染流程，导致所有B组件必须完成计算后才会一起显示。要实现逐个渲染，只需把B组件的计算逻辑改成异步执行，让每个组件完成计算后自行更新状态触发渲染即可。

方法一：用useEffect异步执行计算 #

修改B组件，将计算逻辑放到useEffect的异步任务中，组件先渲染加载状态，计算完成后再更新结果：

import { useState, useEffect } from 'react';

export function B(props) {
  const { info } = props;
  const [result, setResult] = useState(null);

  useEffect(() => {
    const calculate = async () => {
      // 替换为你的实际耗时计算逻辑
      await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟耗时操作
      const computedResult = info * 2;
      setResult(computedResult);
    };

    calculate();
  }, [info]);

  // 计算未完成时显示加载状态
  if (result === null) {
    return <p>加载中...</p>;
  }

  return <p>{result}</p>;
}

A组件保持原有逻辑即可：

export function A(props) {
  const { infos } = props;
  return infos.map((info, index) => <B key={index} info={info} />);
}

这样每个B组件会先渲染加载状态，各自完成异步计算后立即更新显示结果，实现逐个展示的效果。

方法二：用Web Worker隔离重计算（适合超大型任务） #

如果计算逻辑极其繁重，会占用主线程影响交互，可以用Web Worker在后台线程执行计算，完全不阻塞渲染：

B组件代码 #

import { useState, useEffect } from 'react';

export function B(props) {
  const { info } = props;
  const [result, setResult] = useState(null);

  useEffect(() => {
    // 创建Worker线程
    const worker = new Worker('./calculationWorker.js');
    // 传递计算参数
    worker.postMessage(info);
    // 接收计算结果
    worker.onmessage = (e) => {
      setResult(e.data);
      worker.terminate(); // 计算完成后销毁Worker
    };

    // 组件卸载时销毁Worker
    return () => worker.terminate();
  }, [info]);

  if (result === null) {
    return <p>加载中...</p>;
  }

  return <p>{result}</p>;
}

新建calculationWorker.js文件 #

// Worker线程中执行计算逻辑
self.onmessage = (e) => {
  const info = e.data;
  // 替换为你的实际耗时计算
  const result = info * 2;
  // 将结果传回主线程
  self.postMessage(result);
};

这种方式下，每个B组件的计算都在独立的后台线程进行，主线程可以流畅处理渲染和交互，计算完成后再更新对应组件的结果。

内容的提问来源于stack exchange，提问作者SNORLAX