先决条件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">? ? ? ? ? ? <button classname="bg-green-500 text-black rounded" onclick="{handlefetch}">? ? ? ? ? ? ? ? fetch? ? ? ? ? ? </button>? ? ? ? ? ? {dogpics && dogpics.map((pic) => @@##@@)}? ? ? ? </div>? ? );}</htmlbuttonelement></htmlinputelement></string></string></worker></string>登录后复制在与 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);};</string>登录后复制现在运行您的应用程序并检查结果！ 以上就是什么是 Web Worker 以及如何在 NextJS 中使用它的详细内容，更多请关注我的其它相关文章！
标签：Web,gt,const,web,Worker,worker,NextJS,创建,线程 From： https://www.cnblogs.com/aow054/p/18424266