Maîtriser le hook React useComponentDidMount

Introduction

Dans ce laboratoire, nous allons apprendre à utiliser le hook useComponentDidMount dans React. Ce hook nous permet d'exécuter une fonction de rappel immédiatement après qu'un composant est monté, de manière similaire à la méthode componentDidMount() des composants de classe. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser ce hook et de sa utilité dans vos projets React.

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 useComponentDidMount 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 après qu'un composant est monté, vous pouvez utiliser le hook useEffect() avec un tableau vide comme deuxième argument. Cela garantira que la fonction de rappel fournie est exécutée une seule fois lorsque le composant est monté. La fonction useComponentDidMount() présentée ci-dessous utilise ce hook pour implémenter le même comportement que la méthode de cycle de vie componentDidMount() des composants de classe.

const useComponentDidMount = (onMountHandler) => {
  React.useEffect(() => {
    onMountHandler();
  }, []);
};

const Mounter = () => {
  useComponentDidMount(() => console.log("Component did mount"));

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

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

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

Résumé

Félicitations ! Vous avez terminé le laboratoire sur le hook React useComponentDidMount. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.