Qu'est-ce que Web Worker et comment l'utiliser dans NextJS

Condition préalable

• Connaissance de base de ReactJS/NextJS

Qu'est-ce que Web Worker

JavaScript est un langage monothread, le thread qu'il utilise est appelé thread principal
Le navigateur utilise en fait d'autres threads
Le travailleur Web de l'API du navigateur vous permet de créer et d'enregistrer des threads supplémentaires avec JavaScript

Pourquoi créer d’autres fils de discussion alors que vous pouvez simplement travailler sur le fil de discussion principal ?

Disons que vous devez calculer beaucoup de données pour dessiner un graphique.
Ces calculs pourraient prendre suffisamment de temps pour que la page ne réponde plus
C'est là qu'intervient le travailleur Web.
Vous pouvez créer un nouveau thread pour calculer ces données et une fois terminé, le Web Worker peut renvoyer le résultat au thread principal

Comment utiliser Web Worker dans NextJS

Dans cet exemple, je vais utiliser Web Worker pour récupérer l'API des photos de chiens et renvoyer le résultat au fil de discussion principal pour afficher ces images

• Lancez votre projet NextJS comme d'habitude
• Faites de page.tsx un composant client en ajoutant 'use client' en haut du fichier car nous voulons utiliser des hooks de réaction ici pour cet exemple
• Créez une entrée avec l'état de valeur habituel et le gestionnaire onChange
• Créez un bouton avec un événement onClick, nous allons utiliser ce bouton pour dire au travailleur Web de récupérer l'API
• Créez une référence pour contenir l'instance de Web Worker
• Créez un effet pour initialiser le travailleur Web et attacher un événement pour gérer les données que le travailleur Web renvoie avec et terminer le thread/travailleur Web après le démontage de la page
• Créez un état pour conserver les URL des images reçues du Web Worker.
• page.tsx ressemble à ceci

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

• Créez un fichier appelé worker.ts dans le même dossier que 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);
};

Maintenant, lancez votre application et vérifiez le résultat !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!