什么是 Web Worker 以及如何在 NextJS 中使用它-js教程-PHP中文网

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

WBOY

发布： 2024-09-12 15:21:14

转载

1221人浏览过

什么是 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"
            ></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);
};

登录后复制

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