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

大家好，我们又见面了啊~本文《什么是 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>
            &lt;input
                placeholder=&quot;number of dogs&quot;
                value={userinput}
                onchange={handleuserinputchange}
                classname=&quot;mr-4 text-black&quot;
            &gt;</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>
    );
}

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

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

今天关于《什么是 Web Worker 以及如何在 NextJS 中使用它》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！