Was ist Web Worker und wie wird er in NextJS verwendet?

Voraussetzung

• Grundkenntnisse von ReactJS/NextJS

Was ist Web Worker?

JavaScript ist eine Single-Thread-Sprache, der verwendete Thread wird als Haupt-Thread bezeichnet
Brower nutzt tatsächlich andere Threads
Mit dem Web Worker über die Browser-API können Sie zusätzliche Threads mit JavaScript erstellen und registrieren

Warum andere Threads erstellen, wenn Sie einfach am Hauptthread arbeiten können?

Angenommen, Sie müssen viele Daten berechnen, um ein Diagramm zu zeichnen.
Diese Berechnungen könnten so lange dauern, bis die Seite nicht mehr reagiert
Hier kommt Web Worker ins Spiel.
Sie können einen neuen Thread erstellen, um diese Daten zu berechnen, und wenn dies erledigt ist, kann der Web-Worker das Ergebnis an den Haupt-Thread zurücksenden

So verwenden Sie Web Worker in NextJS

In diesem Beispiel werde ich Web Worker verwenden, um die API für Hundebilder abzurufen und das Ergebnis an den Hauptthread zurückzusenden, um diese Bilder anzuzeigen

• Initiieren Sie Ihr NextJS-Projekt wie gewohnt
• Machen Sie die Datei „page.tsx“ zu einer Client-Komponente, indem Sie „Client verwenden“ am Anfang der Datei hinzufügen, da wir hier für dieses Beispiel React-Hooks verwenden möchten
• Erstellen Sie eine Eingabe mit dem üblichen Wertstatus und dem onChange-Handler
• Erstellen Sie eine Schaltfläche mit einem onClick-Ereignis. Wir werden diese Schaltfläche verwenden, um den Web-Worker anzuweisen, die API abzurufen
• Erstellen Sie eine Referenz, um die Web-Worker-Instanz zu speichern
• Erstellen Sie einen Effekt, um den Web-Worker zu initialisieren, und hängen Sie ein Ereignis an, um die Daten zu verarbeiten, die der Web-Worker zurücksendet, und beenden Sie den Thread/Web-Worker, nachdem die Bereitstellung der Seite aufgehoben wurde
• Erstellen Sie einen Status zum Speichern von Bild-URLs, die vom Web-Worker empfangen werden.
• page.tsx sieht so aus

"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>
    );
}

• Erstellen Sie eine Datei namens worker.ts im selben Ordner wie page.tsx

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);
};

Jetzt starten Sie Ihre App und überprüfen Sie das Ergebnis!

Das obige ist der detaillierte Inhalt vonWas ist Web Worker und wie wird er in NextJS verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!