React中耗时计算函数阻塞线程，Web Worker能否解决问题？

是的，Web Worker绝对能帮你解决当前的阻塞问题——甚至这才是解决这类高耗时计算阻塞主线程问题的正确姿势，而你之前用的setTimeout其实根本没触及核心矛盾。

为什么setTimeout解决不了阻塞？ #

你得先搞懂setTimeout的本质：它只是把你的reallyExpansiveFunc放到浏览器的宏任务队列里，等主线程当前的调用栈清空后再执行。但不管延迟多久，reallyExpansiveFunc最终还是在主线程上运行。一旦这个函数开始执行，它会霸占主线程的调用栈直到计算完成——这段时间里浏览器根本没法处理用户的点击、滚动或者渲染请求，自然就会出现无响应的情况。

举个例子：如果你的reallyExpansiveFunc要跑800ms，哪怕你用setTimeout延迟100ms执行，那这800ms里主线程还是被完全卡住，用户操作照样没反应。

Web Worker是怎么解决问题的？ #

Web Worker是运行在独立于主线程的后台线程里的，它和主线程之间只能通过消息传递（postMessage/onmessage）通信。当你把计算逻辑移到Worker里后：

1. 主线程只需要给Worker发一条消息（这个操作耗时极短，几乎不占用主线程资源）
2. Worker在后台线程默默执行高耗时计算，完全不会影响主线程的正常工作（用户点击、页面渲染都能正常响应）
3. 计算完成后，Worker把结果发回主线程，主线程只需要更新状态渲染UI就行

给你代码的几点优化建议 #

看了你的实现代码，有几个小问题需要调整，才能让Worker真正发挥作用：

1. 消息类型要匹配：你的React组件里发的消息是{msg: 'reallyExpansiveFunc', ...}，但Worker里判断的是$event.data.msg === 'changeData'，这会导致Worker无法识别消息，永远不会执行计算。把两边的消息类型统一起来（比如都用'runExpansiveCalc'）。
2. 修正setTimeout里的逻辑：你的第二个useEffect里写了setTimeout(()=>{ setData(reallyExpansiveFunc()) },100)，但reallyExpansiveFunc只是给Worker发消息，没有返回值，所以setData这里完全没必要——Worker计算完成后会通过onmessage回调触发setData。
3. 清理Worker监听：在组件卸载时最好关闭Worker，避免内存泄漏，可以在useEffect的返回函数里执行calcWorker.terminate()。

调整后的核心代码大概是这样：

// React组件内
useEffect(() => { 
  const handleMessage = ($event) => { 
    if ($event?.data) { 
      setData($event.data); 
    } 
  };
  calcWorker.onmessage = handleMessage;

  // 组件卸载时清理
  return () => {
    calcWorker.removeEventListener('message', handleMessage);
    calcWorker.terminate();
  };
}, [calcWorker]); 

const reallyExpansiveFunc = () => { 
  calcWorker.postMessage({msg: 'runExpansiveCalc', data: data}); 
};

useEffect(()=>{ 
  const timer = setTimeout(reallyExpansiveFunc, 100);
  // 清理定时器
  return () => clearTimeout(timer);
}, [reallyExpansiveFunc, data]);

// Web Worker文件
self.onmessage = async ($event) => { 
  if ($event?.data?.msg === 'runExpansiveCalc') { 
    // 这里写你的高耗时计算逻辑
    const calcResult = doExpansiveCalculation($event.data.data); 
    self.postMessage(calcResult); 
  } 
};

function doExpansiveCalculation(data) {
  // 原来的reallyExpansiveFunc里的计算代码
}

总结 #

• setTimeout只是延迟执行，并不能让计算脱离主线程，所以解决不了阻塞问题
• Web Worker把计算放到独立线程，彻底解放主线程，是处理这类高耗时计算的标准方案
• 只要保证消息通信逻辑正确，你的组件就能在不阻塞浏览器的前提下完成状态计算和渲染

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