Hook React useUnload

Introduction

Dans ce laboratoire (lab), nous allons explorer le hook useUnload dans React, qui nous permet de gérer l'événement de fenêtre beforeunload. Le but de ce laboratoire est de démontrer comment utiliser ce hook pour créer une fonction de rappel (callback) qui sera déclenchée lorsque l'utilisateur tente de fermer la fenêtre. Nous apprendrons également comment effectuer le nettoyage (cleanup) après le démontage du composant. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la gestion des événements de fenêtre dans React.

React useUnload Hook

index.html et script.js ont déjà été fournis dans la machine virtuelle (VM). En général, vous n'avez qu'à ajouter du code à script.js et style.css.

L'événement de fenêtre beforeunload peut être géré en utilisant les étapes suivantes :

1. Créez une référence (ref) pour la fonction de rappel (callback), fn, en utilisant le hook useRef().
2. Utilisez le hook useEffect() et EventTarget.addEventListener() pour gérer l'événement 'beforeunload', qui est déclenché lorsque l'utilisateur est sur le point de fermer la fenêtre.
3. Utilisez EventTarget.removeEventListener() pour effectuer le nettoyage (cleanup) après le démontage du composant.

Voici le code :

const useUnload = (fn) => {
  const callbackRef = React.useRef(fn);

  React.useEffect(() => {
    const callback = callbackRef.current;
    window.addEventListener("beforeunload", callback);
    return () => {
      window.removeEventListener("beforeunload", callback);
    };
  }, [callbackRef]);
};

const App = () => {
  useUnload((e) => {
    e.preventDefault();
    const exit = confirm("Are you sure you want to leave?");
    if (exit) window.close();
  });

  return <div>Try closing the window.</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations! Vous avez terminé le laboratoire (lab) sur le hook React useUnload. Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.