如何在React中创建带加载图标的非阻塞函数

原代码无效的原因 #

你之前的写法没效果，核心问题是：setState的回调仍运行在主线程中，且calculateComplicatedStuff()是同步阻塞的重计算。React更新状态后，还没来得及渲染加载动画，同步计算就占满了主线程，等计算结束立刻把spinner设为false，导致用户看不到加载提示，同时整个UI卡住。

最简快速改造方案（无需额外文件） #

用setTimeout把计算任务延后到下一个事件循环，给React留足时间渲染加载动画：

render() {
  return <>
    <SomeSpinner visible={this.state.spinner}/>
  </>
}

// 触发计算的逻辑
this.setState({ spinner: true }, () => {
  // 用setTimeout把计算放到宏任务队列，让主线程先渲染spinner
  setTimeout(() => {
    calculateComplicatedStuff();
    this.setState({ spinner: false });
  }, 0);
});

说明：这个方案能让加载动画正常显示，但计算过程中UI仍会卡顿——因为计算仍在主线程执行，只是延后了一步。适合计算量不算特别大的场景。

彻底无卡顿方案（Web Worker） #

如果计算量极大，需要让计算在独立线程运行、完全不阻塞UI，就用Web Worker：

1. 新建一个Worker文件（比如calculation.worker.js），把计算逻辑移进去：

// calculation.worker.js
// 监听主线程发来的计算请求
self.onmessage = (e) => {
  // 执行复杂计算，可接收主线程传递的参数
  const result = calculateComplicatedStuff(e.data);
  // 把计算结果发回主线程
  self.postMessage(result);
};

// 你的复杂计算函数
function calculateComplicatedStuff(params) {
  // 这里写你的计算逻辑
}

2. 在React组件中使用Worker：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { spinner: false };
    // 初始化Worker
    this.calcWorker = new Worker('./calculation.worker.js');
    // 监听Worker返回的结果
    this.calcWorker.onmessage = (e) => {
      // 处理计算结果
      const calculationResult = e.data;
      // 关闭加载动画
      this.setState({ spinner: false });
    };
  }

  handleStartCalculation = () => {
    // 显示加载动画
    this.setState({ spinner: true });
    // 给Worker发送计算参数（不需要的话可以传空）
    this.calcWorker.postMessage(/* 计算所需参数 */);
  };

  // 组件卸载时销毁Worker，避免内存泄漏
  componentWillUnmount() {
    this.calcWorker.terminate();
  }

  render() {
    return <>
      <SomeSpinner visible={this.state.spinner}/>
      <button onClick={this.handleStartCalculation}>开始计算</button>
    </>
  }
}

说明：Web Worker在独立线程运行计算，主线程完全不受影响，加载动画和UI交互都能流畅进行。注意Worker不能直接访问React组件的state或DOM，只能通过postMessage传递数据。

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