在react app中使用 web worker的方案，基于 creat-react-app脚手架，并且webapck 为 5.x

拿我格子衫来

发布于 2024-12-28 10:29:11

2670

文章被收录于专栏：TopFETopFE

在src目录下创建 gcode.worker.js 文件

// 禁用eslint
console.log("Worker 脚本已加载");

/* eslint-disable */
self.onmessage = function (event) {
  const { task, data } = event.data;
  console.log(task, "task");
  if (task === "heavyComputation") {
    const result = heavyComputation(data);
    self.postMessage(result);
  }
};

function heavyComputation(data) {
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum += data[i] * data[i];
    console.log(sum, "sum");
  }
  return sum;
}

改写 App.tsx

import React, { useEffect, useState } from "react";

function App() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const worker = new Worker(new URL("./gcode.worker.js", import.meta.url));

    worker.onmessage = (event: any) => {
      console.log("从 Worker 收到的结果:", event.data);
      setResult(event.data);
    };

    const largeArray = Array.from({ length: 10000 }, () => Math.floor(Math.random() * 100));

    console.log("发送给 Worker 的数据:", largeArray);
    worker.postMessage({ task: "heavyComputation", data: largeArray });

    return () => {
      worker.terminate();
    };
  }, []);

  return (
    <div className="App">
      <h1>React Web Worker 示例</h1>
      <p>计算结果：{result !== null ? result : "计算中..."}</p>
      <p>主线程未被阻塞，页面依然可以正常操作！</p>
    </div>
  );
}

export default App;

效果