@bovinphang/frontend-craft 2.5.0

package/skills/fec-web-workers/references/basic-worker.md

@@ -0,0 +1,67 @@
+# 基础 Worker 与生命周期
+
+## Worker 文件
+
+```ts
+// workers/heavy-compute.worker.ts
+self.onmessage = (event: MessageEvent<{ numbers: number[] }>) => {
+  const result = [...event.data.numbers].sort((a, b) => a - b);
+  self.postMessage(result);
+};
+```
+
+## Vite 导入
+
+```ts
+import HeavyComputeWorker from "./workers/heavy-compute.worker?worker";
+
+const worker = new HeavyComputeWorker();
+worker.postMessage({ numbers: [3, 1, 4, 1, 5] });
+worker.onmessage = (event: MessageEvent<number[]>) => {
+  console.log(event.data);
+};
+worker.onerror = (error) => {
+  console.error(error.message);
+};
+```
+
+## React 生命周期封装
+
+```tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useWorker<TRequest, TResult>(factory: () => Worker) {
+  const workerRef = useRef<Worker | null>(null);
+  const [result, setResult] = useState<TResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+
+  useEffect(() => {
+    const worker = factory();
+    workerRef.current = worker;
+    worker.onmessage = (event: MessageEvent<TResult>) => {
+      setResult(event.data);
+      setIsRunning(false);
+    };
+    worker.onerror = (event) => {
+      setError(event.message);
+      setIsRunning(false);
+    };
+    return () => worker.terminate();
+  }, [factory]);
+
+  const run = useCallback((data: TRequest) => {
+    setIsRunning(true);
+    setError(null);
+    workerRef.current?.postMessage(data);
+  }, []);
+
+  return { run, result, error, isRunning };
+}
+```
+
+## 验证
+
+- Performance 面板中长任务减少。
+- 用户输入延迟下降。
+- 组件卸载后没有继续收到 worker message。