透過 Web Workers API 改善 React 大量計算阻塞渲染幀數01.medium

basic.jsx

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [sum, setSum] = useState(0);

  useEffect(() => {
    const worker = new Worker("./computing.js");
    worker.addEventListener("message", (e) => {
      const data = e.data;
      setSum(data);
    });
    worker.postMessage([0, 1000000000]);
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Count Sum: {sum}</h2>
    </div>
  );
}

computing.js

onmessage = (e) => {
  const [num1, num2] = e.data;
  let sum = 0;
  for (let i = num1; i < num2; i++) {
    sum += i;
  }
  postMessage(sum);
};