先决条件
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 ( {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);};
现在运行您的应用程序并检查结果！
以上就是什么是 Web Worker 以及如何在 NextJS 中使用它的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491337.html
微信扫一扫 
支付宝扫一扫 
