[{"_1":2,"_31":-5,"_32":-5},"loaderData",{"_3":4},"routes/post.$id",{"_5":6},"post",{"_7":8,"_9":10,"_11":12,"_14":15,"_16":17,"_18":19,"_20":19,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30},"id","1c02fe55-0272-4cfc-b8f5-3c8af3df6188","excerpt","Web Worker 是一种允许将 JavaScript 任务从主线程转移到单独的后台线程执行的 Web 标准技术。这种机制对于处理复杂计算或高性能任务（例如数据处理、复杂运算）来说尤其有用，因为它可以保持主线程的响应能力。","tags",[13],"React.js","title","Using Web Workers in React","content","

Web Worker 允许在后台线程中执行脚本，与主线程分离。这使得开发者可以处理耗时的任务而不阻塞用户界面的响应。在 React 中，正确地使用 Web Worker 可以显著改善用户体验，特别是在涉及大量计算的场景。

一. 如何使用

1. 创建 Web Worker 文件

worker.js

// worker.js\nself.onmessage = (event) => {\n  const msg = event.data;\n  // todo\n  postMessage(`worker: ${msg}`);\n};

2. 创建 Web Worker 实例

import React, { useState } from \"react\";\n\nconst App = () => {\n  const [msg, setMsg] = useState('');\n  const [input, setInput] = useState(\"\");\n\n  const handleWorker = () => {\n    const worker = new Worker(new URL(\"./worker.js\", import.meta.url));\n    \n    worker.postMessage('hello world');\n\n    worker.onmessage = (event) => {\n      setMsg(event.data);\n      worker.terminate();\n    };\n  };\n\n  return (\n    <div>\n      <h1>React Web Worker Example</h1>\n      <input\n        type=\"text\"\n        value={input}\n        onChange={(e) => setInput(e.target.value)}\n        placeholder=\"Enter a message\"\n      />\n      <button \n\t\tonClick={handleWorker}\n\t  >Submit</button>\n      {msg && <p>Message: {msg}</p>}\n    </div>\n  );\n};\n\nexport default App;

二. 使用场景

Web Worker 通常用于以下场景：

数据处理（如排序、大量计算）
图像处理（如滤镜应用、图像压缩）
文件操作（如数据提取、文件生成）

","created_at","2025-04-25T03:19:18.979896","updated_at","user_id","e05f7679-d5aa-4ffb-a300-d2c1acecc5e5","user_name","Suyi","user_email","thonatos.yang@gmail.com","category_id","a18eac3f-d4bd-4f5b-ad01-d86ac6092f40","category_name","javascript","actionData","errors"]

ρV

Using Web Workers in React

Using Web Workers in React