先决条件
- 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);
};
现在运行您的应用程序并检查结果！
