什麼是 Web Worker 以及如何在 NextJS 中使用它

先決條件

• ReactJS/NextJS 基礎

---

什麼是網路工作者

JavaScript 是一種單執行緒語言，它使用的執行緒稱為主執行緒
瀏覽器實際上使用其他執行緒
來自瀏覽器 API 的 Web Worker 是您使用 JavaScript 建立和註冊附加執行緒的一種方式

---

當您只能在主執行緒上工作時，為什麼還要建立其他執行緒呢？

假設您需要計算大量資料來繪製圖表。
這些計算可能需要足夠長的時間才能使頁面無回應
這就是網路工作者的用武之地。
您可以建立新執行緒來計算這些數據，完成後，Web Worker 可以將結果傳回主執行緒

---

如何在 NextJS 中使用 Web Worker

在此範例中，我將使用 Web Worker 獲取狗圖片 API 並將結果發送回主線程以顯示這些圖像

• 照常初始化 NextJS 專案
• 透過在檔案頂部新增「use client」使 page.tsx 成為客戶端元件，因為我們希望在此範例中使用 React hooks
• 使用通常的值狀態和 onChange 處理程序建立輸入
• 建立一個帶有 onClick 事件的按鈕，我們將使用此按鈕告訴 Web Worker 取得 API
• 建立一個 Ref 來保存 Web Worker 實例
• 建立一個 Effect 來初始化 Web Worker 並附加一個事件來處理 Web Worker 發回的數據，並在頁面卸載後終止線程/Web Worker
• 建立一個狀態來保存從 Web Worker 接收到的映像 URL。
• page.tsx 看起來像這樣

"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">
            <button classname="bg-green-500 text-black rounded" onclick="{handleFetch}">
                fetch
            </button>
            {dogPics && dogPics.map((pic) => <img key="{pic}" src="%7Bpic%7D" alt="dog pic">)}
        </div>
    );
}
</htmlbuttonelement></htmlinputelement></string></string></worker></string>

• 在與 page.tsx 相同的資料夾中建立一個名為worker.ts的文件

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);
};
</string>

現在運行您的應用程式並檢查結果！

以上是什麼是 Web Worker 以及如何在 NextJS 中使用它的詳細內容。更多資訊請關注PHP中文網其他相關文章！