先决条件

• 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);
};

现在运行您的应用程序并检查结果！