JavaScript 是一種單執行緒語言，它使用的執行緒稱為主執行緒
瀏覽器實際上使用其他執行緒
來自瀏覽器 API 的 Web Worker 是您使用 JavaScript 建立和註冊附加執行緒的一種方式
假設您需要計算大量資料來繪製圖表。
這些計算可能需要足夠長的時間才能使頁面無回應
這就是網路工作者的用武之地。
您可以建立新執行緒來計算這些數據，完成後，Web Worker 可以將結果傳回主執行緒
在此範例中，我將使用 Web Worker 獲取狗圖片 API 並將結果發送回主線程以顯示這些圖像
"use client";
import { ChangeEvent, MouseEvent, useCallback, useEffect, useRef, useState } from "react";
export default function Home() {
const [userInput, setUserInput] = useState<string>("");
const workerRef = useRef<Worker>();
const [dogPics, setDogPics] = useState<string[]>();
useEffect(() => {
workerRef.current = new Worker(new URL("./worker.ts", import.meta.url));
workerRef.current.onmessage = (event: MessageEvent<string[]>) => setDogPics(event.data);
return () => {
workerRef.current?.terminate();
};
}, []);
const handleUserInputChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
setUserInput(e.target.value);
},
[setUserInput]
);
const handleFetch = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
userInput && workerRef.current?.postMessage(userInput);
},
[userInput]
);
return (
<div>
<input
placeholder="number of dogs"
value={userInput}
onChange={handleUserInputChange}
className="mr-4 text-black"
></input>
<button className="bg-green-500 text-black rounded" onClick={handleFetch}>
fetch
</button>
{dogPics && dogPics.map((pic) => <img key={pic} src={pic} alt="dog pic"></img>)}
</div>
);
}
self.onmessage = async (e: MessageEvent<string>) => {
const url = `https://dog.ceo/api/breeds/image/random/${e.data}`;
const response = await fetch(url).then((res) => res.json());
self.postMessage(response.message);
};
現在運行您的應用程式並檢查結果！
以上是什麼是 Web Worker 以及如何在 NextJS 中使用它的詳細內容。更多資訊請關注PHP中文網其他相關文章！
