Les crochets de cycle de vie Svelte : Qu’est-ce que c’est et comment ça marche ?

Principaux enseignements

• Les crochets de cycle de vie de Svelte vous permettent de contrôler les différentes étapes du cycle de vie d’un composant, telles que l’initialisation, la mise à jour et la destruction.
• Les quatre principaux crochets de cycle de vie de Svelte sont onMount, onDestroy, beforeUpdate et afterUpdate.
• En utilisant ces crochets de cycle de vie, vous pouvez effectuer des actions telles que la récupération de données, la mise en place d’écouteurs d’événements, le nettoyage des ressources et la mise à jour de l’interface utilisateur en fonction des changements d’état.

Svelte est un framework JavaScript moderne qui vous permet de créer des applications web efficaces. L’une des caractéristiques essentielles de Svelte est ses crochets de cycle de vie qui vous permettent de contrôler les différentes étapes du cycle de vie d’un composant.

Que sont les crochets de cycle de vie ?

Les crochets de cycle de vie sont des méthodes qui se déclenchent à des moments précis du cycle de vie d’un composant. Elles vous permettent d’effectuer des actions particulières à ces moments-là, telles que l’initialisation du composant, la réponse aux changements ou le nettoyage des ressources.

Les différents frameworks ont des crochets de cycle de vie différents, mais ils ont tous des caractéristiques communes. Svelte propose quatre crochets de cycle de vie principaux : onMount, onDestroy, avant la mise à jour et après la mise à jour.

Mise en place d’un projet Svelte

Pour comprendre comment vous pouvez utiliser les crochets de cycle de vie de Svelte, commencez par créer un projet Svelte. Vous pouvez le faire de différentes manières, par exemple en utilisant Vite (un outil de construction frontal) ou degit. Degit est un outil en ligne de commande qui permet de télécharger et de cloner des dépôts git sans télécharger tout l’historique git.

Utilisation de Vite

Pour créer un projet Svelte à l’aide de Vite, exécutez la commande suivante dans votre terminal :

Une fois la commande exécutée, vous répondrez à quelques invites pour fournir le nom de votre projet, le framework que vous souhaitez utiliser et la variante spécifique de ce framework.

Maintenant, naviguez vers le répertoire du projet et installez les dépendances nécessaires.

Pour ce faire, exécutez les commandes suivantes :

Utilisation de degit

Pour configurer votre projet Svelte à l’aide de degit, exécutez cette commande dans votre terminal :

Ensuite, naviguez vers le répertoire du projet et installez les dépendances nécessaires :

Travailler avec le crochet onMount

Le onMount est un crochet essentiel du cycle de vie dans Svelte. Svelte appelle le hook onMount lorsqu’un composant est rendu pour la première fois et inséré dans le DOM. Il est similaire au crochet componentDidMount dans les composants de classe React ou la méthode de cycle de vie useEffect dans les composants fonctionnels React avec un tableau de dépendances vide.

Vous utiliserez principalement le hook onMount pour effectuer des tâches d’initialisation, telles que la récupération de données d’une API ou la mise en place d’écouteurs d’événements. Le hook onMount est une fonction qui prend un seul argument. Cet argument est la fonction que l’application appellera lors du premier rendu du composant.

Voici un exemple d’utilisation du crochet onMount :

Dans votre svelte-app créez un projet src/Test.svelte et ajoutez-y le code ci-dessus. Ce code importe le hook onMount de Svelte et l’appelle pour exécuter une fonction simple qui enregistre du texte sur la console. Pour tester le hook onMount, rendez le fichier Test dans votre page src/App.svelte dans votre fichier src/App.svelte :

Par exemple :

Exécutez ensuite l’application :

En exécutant cette commande, vous obtiendrez une URL locale telle que http://localhost:8080. Visitez le lien dans un navigateur web pour voir votre application. L’application affichera le texte « Component has been added to the DOM » dans la console de votre navigateur.

Travailler avec le crochet onDestroy

Comme l’inverse du crochet onDestroy onMount Svelte appelle le hook onDestroy lorsqu’il est sur le point de supprimer un composant du DOM. Le crochet onDestroy est utile pour nettoyer toutes les ressources ou les écouteurs d’événements que vous avez mis en place pendant le cycle de vie du composant.

Ce hook est similaire au hook componentWillUnmount et sa méthode de cycle de vie effet d’utilisation avec une fonction de nettoyage.

Voici un exemple d’utilisation du crochet onDestroy :

Ce code démarre une minuterie qui enregistre le texte « intervalle » dans la console de votre navigateur toutes les secondes. Il utilise le hook onDestroy pour effacer l’intervalle lorsque le composant quitte le DOM. Cela empêche l’intervalle de continuer à s’exécuter lorsque le composant n’est plus nécessaire.

Travailler avec les crochets beforeUpdate et afterUpdate

Les crochets beforeUpdate et afterUpdate beforeUpdate et après la mise à jour sont des fonctions de cycle de vie qui s’exécutent avant et après la mise à jour du DOM. Ces crochets sont utiles pour effectuer des actions basées sur des changements d’état, comme la mise à jour de l’interface utilisateur ou le déclenchement d’effets secondaires.

Le hook beforeUpdate s’exécute avant la mise à jour du DOM et à chaque fois que l’état du composant change. Il est similaire à getSnapshotBeforeUpdate dans les composants de classe React. Vous utilisez principalement le crochet beforeUpdate lorsque vous comparez le nouvel état de l’application à son ancien état.

Vous trouverez ci-dessous un exemple d’utilisation du crochet beforeUpdate :

Remplacez le code dans votre Test par le bloc de code ci-dessus. Ce code utilise le crochet beforeUpdate pour enregistrer la valeur du composant compte avant que le DOM ne soit mis à jour. Chaque fois que vous cliquez sur le bouton, la fonction d’incrémentation s’exécute et augmente la valeur de l’état count de 1. Cela entraîne l’exécution de la fonction beforeUpdate et l’enregistrement de la valeur de l’état count.

Le crochet afterUpdate s’exécute après la mise à jour du DOM. Il est généralement utilisé pour exécuter du code qui doit se produire après les mises à jour du DOM. Ce hook est similaire à componentDidUpdate dans React. Le hook afterUpdate fonctionne comme le hook beforeUpdate.

Par exemple :

Le bloc de code ci-dessus est similaire au précédent, mais celui-ci utilise le hook afterUpdate pour enregistrer la valeur de l’état de comptage à la place. Cela signifie qu’il enregistrera l’état de comptage après les mises à jour du DOM.

Construire des applications robustes en utilisant les crochets de cycle de vie de Svelte

Les crochets de cycle de vie de Svelte sont des outils essentiels utilisés pour créer des applications dynamiques et réactives. Comprendre les crochets de cycle de vie est une partie importante de la programmation Svelte. Grâce à ces crochets, vous pouvez contrôler l’initialisation, la mise à jour et la destruction de vos composants et gérer leurs changements d’état.