LabEx
EntrerRejoindre

Hook useComponentWillUnmount de React

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer le hook useComponentWillUnmount dans React, qui nous permet d'exécuter une fonction de rappel juste avant qu'un composant ne soit démonté et détruit. En utilisant ce hook, nous pouvons effectuer toutes les tâches de nettoyage nécessaires, telles que la suppression des écouteurs d'événements ou l'annulation de toutes les requêtes en attente. Ce laboratoire vous donnera une expérience pratique dans l'utilisation de ce hook et la compréhension de son comportement, qui est similaire à la méthode de cycle de vie componentWillUnmount() dans les composants de classe.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

React useComponentWillUnmount Hook

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

Pour exécuter une fonction de rappel immédiatement avant qu'un composant ne soit démonté et détruit, vous pouvez utiliser le hook useEffect() avec un tableau vide comme deuxième argument. Retournez la fonction de rappel fournie pour qu'elle soit exécutée une seule fois avant le nettoyage. Ce comportement est similaire à la méthode de cycle de vie componentWillUnmount() des composants de classe. Vous pouvez également utiliser le extrait de code suivant pour créer un hook personnalisé useComponentWillUnmount() qui prend une fonction onUnmountHandler en argument et l'exécute avant que le composant ne soit démonté :

const useComponentWillUnmount = (onUnmountHandler) => {
  React.useEffect(
    () => () => {
      onUnmountHandler();
    },
    []
  );
};

Vous pouvez ensuite utiliser ce hook personnalisé dans votre composant fonctionnel comme ceci :

const Unmounter = () => {
  useComponentWillUnmount(() => console.log("Component will unmount"));

  return <div>Check the console!</div>;
};

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

Cela affichera "Component will unmount" dans la console lorsque le composant est sur le point d'être démonté.

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 sur le hook React useComponentWillUnmount. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.