先决条件

• 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(() =&gt; {
        workerref.current = new worker(new url("./worker.ts", import.meta.url));
        workerref.current.onmessage = (event: messageevent<string>) =&gt; setdogpics(event.data);
        return () =&gt; {
            workerref.current?.terminate();
        };
    }, []);

    const handleuserinputchange = usecallback(
        (e: changeevent<htmlinputelement>) =&gt; {
            setuserinput(e.target.value);
        },
        [setuserinput]
    );

    const handlefetch = usecallback(
        (e: mouseevent<htmlbuttonelement>) =&gt; {
            userinput &amp;&amp; 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 &amp;&amp; dogpics.map((pic) =&gt; @@##@@)}
        </div>
    );
}
</htmlbuttonelement></htmlinputelement></string></string></worker></string>

• 在与 page.tsx 相同的文件夹中创建一个名为worker.ts的文件

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

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