先決條件

• 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("");
    const workerRef = useRef();
    const [dogPics, setDogPics] = useState();

    useEffect(() => {
        workerRef.current = new Worker(new URL("./worker.ts", import.meta.url));
        workerRef.current.onmessage = (event: MessageEvent) => setDogPics(event.data);
        return () => {
            workerRef.current?.terminate();
        };
    }, []);

    const handleUserInputChange = useCallback(
        (e: ChangeEvent) => {
            setUserInput(e.target.value);
        },
        [setUserInput]
    );

    const handleFetch = useCallback(
        (e: MouseEvent) => {
            userInput && workerRef.current?.postMessage(userInput);
        },
        [userInput]
    );

    return (
        

            
            
                fetch
            
            {dogPics && dogPics.map((pic) => )}
        
    );
}

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

self.onmessage = async (e: MessageEvent) => {
    const url = `https://dog.ceo/api/breeds/image/random/${e.data}`;
    const response = await fetch(url).then((res) => res.json());
    self.postMessage(response.message);
};

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