目录

1. Web Worker 解决什么？
2. 从useRef来看，在 React 中持久化 Worker 实例
3. 消息机制的观点是。主线程与 Worker 的双向通信
4. 完整生命周期这方面，初始化、通信、销毁

一、Web Worker 解决什么？

JS 主线程执行如下循环时会阻塞所有 UI 交互——点击、输入、滚动全部卡死，直到循环结束。不过，这不是代码写得不好，而是 单线程 Event Loop 的物理限制主线程既要管 DOM 渲染。又要管使用者交互，还要处理五千万次计算，它根本忙但是来。

Web Worker 的意义在于：

• 在主线程之外开辟独立后台线程，专门跑纯计算任务。
• 不再让 UI 卡死，让使用者感受到流畅的交互体验。怎么说呢，

注意：

• 不能访问 DOM、window 等对象。
• 只能通过消息机制和主线程通信。
• 本质仍是浏览器的多线程能力，JS 本身仍是单线程。

二、useRef：在 React 中持久化 Worker 实例

每次 new Worker 都会启动一个独立的 OS 线程，创建成本不低。如果在组件里用 useState 保存 Worker，组件每次重新渲染都会丢失引用并重新创建。这会导致：

• 性能浪费——频繁启动/销毁线程。
• Pain Point——页面闪烁或出现意外错误。

const workerRef = useRef;// 组件重渲染不会重置这个值

useRef 返回一个 { current: null } 对象。这个对象在整个组件生命周期中只有一份，修改 .current 不会触发重渲染——完美适合存放 Worker 实例。

三、消息机制：主线程与 Worker 的双向通信

The only way two isolated threads talk is via message channel.

主线程发 → Worker 收

// 主线程
workerRef.current.postMessage;其实，

Worker 收 → 主线程 发

// worker.js
self.onmessage = => {
const { num } = e.data;let sum = 0，for {
sum += num * i;}
// 计算完毕后把结果发回主线程
self.postMessage;}，

主线程监听结果并更新 UI

// 主线程
workerRef.current.onmessage = => {
const { result } = e.data;setResult，setLoading;}，

The whole heavy computation runs in worker,leaving main thread free to render,respond to clicks。and keep page responsive.

四、完整生命周期：初始化、通信、销毁
function App {
const workerRef = useRef;const = useState;
话说回来，const = useState;// ---------- 挂载 & 初始化 ----------
useEffect => {
// 创建一次 worker
workerRef.current = new Worker);// 注册回调接收计算结果
workerRef.current.onmessage = => {
setResult;setLoading，};// ---------- 卸载 & 销毁 ----------
return => {
if {
workerRef.current.terminate;// 停止后台计算
workerRef.current = null;// 手动释放引用
}
};},)，// 空依赖数组确保只运行一次
// ---------- 发起计算 ----------
const startHeavyCalc = => {
setLoading;workerRef.current.postMessage;}，return (


useRef + WebWorker 耗时运算

{loading?"正在后台计算，" : "启动繁重计算任务"}

{result && 

至于计算结果，{result}
}

);}


生命周期四个阶段概览表 



阶段 
关键代码 
做了什么 



#1 挂载 
Create Worker 并绑定 .onmessage





#2 通信 .postMessage.onmessage



 #3 更新 setResult + setLoading收到结果后更新 UI 状态，按钮恢复可点击。



 #4 卸载 return => { terminate;}组件卸载时手动终止 Worker 防止内存泄漏。









状态流转图 

mermaid
flowchart LR
A --> B
B --> C
C --> D
D --> E
E --> F


`disabled={loading}` 在计算期间禁用按钮防止重复提交，“正在后台计算…” 文案让使用者明确任务仍在进行而不是页面卡死。

五、 


Web Worker 是浏览器提供的多线 能力：UI 留给主线 程，耗时运算交给后台。只能通过消息通道交流，不能直接操作 DOM。

useRef 持久化 Worker：`workerRef.current` 在组件每次渲染后保持不变；修改 `current` 不触发额外渲染。

消息机制是唯一桥梁：`postMessage` → `onmessage` 双向传递数据；确保数据结构序列化安全，

useEffect 管理生命周期：挂载时 `new Worker`；卸载时 `terminate` + 手动置空；避免资源泄漏，

loading 状态防止重复提交：按钮 `disabled={loading}` + 文案切换，让使用者感知“正在后台计算”。


—  主线 程是前台服务员，Worker 是后厨大厨。点菜后你可以继续聊天菜做好后铃声响再来取餐，不会被卡住。