Découvrez comment exécuter du code à différents stades du cycle de vie de vos composants.

Points clés à retenir

  • Les hooks 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 hooks de cycle de vie dans Svelte sont onMount, onDestroy, beforeUpdate et afterUpdate.
  • En utilisant ces hooks de cycle de vie, vous pouvez effectuer des actions telles que la récupération de données, la configuration 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 fonctionnalités essentielles de Svelte réside dans ses hooks de cycle de vie qui vous permettent de contrôler les différentes étapes du cycle de vie d'un composant.

Que sont les hooks de cycle de vie?

Les hooks de cycle de vie sont des méthodes qui se déclenchent à des moments spécifiques du cycle de vie d'un composant. Ils vous permettent d'effectuer des actions particulières à ces moments-là, comme initialiser le composant, répondre aux modifications ou nettoyer les ressources.

instagram viewer

Différents frameworks ont des hooks de cycle de vie différents, mais ils partagent tous des fonctionnalités communes. Svelte propose quatre hooks majeurs de cycle de vie: surMont, surDestroy, avant la mise à jour, et après la mise à jour.

Mettre en place un projet Svelte

Pour comprendre comment utiliser les hooks de cycle de vie de Svelte, commencez par créer un projet Svelte. Vous pouvez le faire de différentes manières, par exemple comme en utilisant Vite (un outil de construction frontal) ou dégit. Degit est un outil de ligne de commande permettant de télécharger et de cloner des référentiels git sans télécharger l'intégralité de l'historique git.

Utiliser Vite

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

npm init vite

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

Maintenant, accédez au répertoire du projet et installez les dépendances nécessaires.

Exécutez les commandes suivantes pour ce faire :

cd svelte-app
npm install

Utiliser des chiffres

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

npx degit sveltejs/template svelte-app

Ensuite, accédez au répertoire du projet et installez les dépendances nécessaires :

cd svelte-app
npm install

Travailler avec le crochet onMount

Le surMont hook est un hook de cycle de vie vital dans Svelte. Svelte appelle le hook onMount lorsqu'un composant est rendu et inséré pour la première fois dans le DOM. C'est semblable au composantDidMount méthode de cycle de vie dans les composants de la classe React ou le utiliserEffetcrochet dans les composants fonctionnels de React avec un tableau de dépendances vide.

Vous utiliserez principalement le hook onMount pour effectuer des tâches d'initialisation, telles que récupérer des données à partir d'une API ou la configuration 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 de la façon dont vous pouvez utiliser le hook onMount :

<script>
import { onMount } from 'svelte'
onMount( () => { console.log('Component has been added to the DOM')} );
script>
<div>
<p>This is a random componentp>
div>

Dans ton application svelte projet, créer un src/Test.svelte fichier 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 le texte sur la console. Pour tester le hook onMount, restituez le Test composant dans votre src/App.svelte déposer:

Par exemple:

<script>
import Test from "./Test.svelte";
script>
<main>
<h1>Hello There!h1>
<Test />
main>

Ensuite, lancez l'application :

npm run dev

L'exécution de cette commande vous fournira une URL locale telle que http://localhost: 8080. Visitez le lien dans un navigateur Web pour afficher votre candidature. L'application enregistrera le texte « Le composant a été ajouté au DOM » dans la console de votre navigateur.

Travailler avec le crochet onDestroy

À l'opposé du surMont crochet, Svelte appelle le surDestroy hook lorsqu'il est sur le point de supprimer un composant du DOM. Le hook onDestroy est utile pour nettoyer toutes les ressources ou écouteurs d'événements que vous avez configurés pendant le cycle de vie du composant.

Ce hook est similaire à celui de React composantWillUnmount méthode du cycle de vie et ses utiliserEffet crochet avec une fonction de nettoyage.

Voici un exemple d'utilisation du hook onDestroy :

<script>
import { onDestroy } from "svelte";
let intervalId;
intervalId = setInterval(() => {
 console.log("interval");
}, 1000);
onDestroy(() => {
 clearInterval(intervalId);
});
script>

Ce code démarre une minuterie qui enregistre le texte « intervalle » sur la console de votre navigateur chaque seconde. 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 hooks beforeUpdate et afterUpdate

Le avant la mise à jour et après la mise à jour les hooks sont des fonctions de cycle de vie qui s'exécutent avant et après la mise à jour du DOM. Ces hooks sont utiles pour effectuer des actions basées sur des changements d'état, telles que la mise à jour de l'interface utilisateur ou le déclenchement d'effets secondaires.

Le hook beforeUpdate s'exécute avant les mises à jour du DOM et à chaque fois que l'état du composant change. C'est similaire à getSnapshotBeforeUpdate dans les composants de la classe React. Vous utilisez principalement le hook beforeUpdate pour comparer le nouvel état de l’application à son ancien état.

Vous trouverez ci-dessous un exemple d'utilisation du hook beforeUpdate :

<script>
import { beforeUpdate } from "svelte";
let count = 0;


beforeUpdate(() => {
 console.log("Count before update:", count);
});


function increment() {
 count += 1;
}
script>
<buttonon: click={increment}>Count: {count}button>

Remplacez le code dans votre Test composant avec le bloc de code ci-dessus. Ce code utilise le hook beforeUpdate pour enregistrer la valeur du compter état avant les mises à jour du DOM. Chaque fois que vous cliquez sur le bouton, la fonction d'incrémentation s'exécute et augmente la valeur de l'état de comptage de 1. Cela provoque l'exécution de la fonction beforeUpdate et l'enregistrement de la valeur de l'état du comptage.

Le hook afterUpdate s'exécute après les mises à jour du DOM. Il est généralement utilisé pour exécuter le code qui doit être exécuté après les mises à jour du DOM. Ce crochet est similaire à composantDidUpdate dans Réagir. Le hook afterUpdate fonctionne comme le hook beforeUpdate.

Par exemple:

<script>
import { afterUpdate } from "svelte";
let count = 0;


afterUpdate(() => {
 console.log("Count after update:", count);
});


function increment() {
 count += 1;
}
script>
<buttonon: click={increment}>Count: {count}button>

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 du décompte après les mises à jour du DOM.

Créez des applications robustes à l'aide des hooks de cycle de vie de Svelte

Les hooks de cycle de vie de Svelte sont des outils essentiels utilisés pour créer des applications dynamiques et réactives. Comprendre les hooks de cycle de vie est un élément précieux de la programmation Svelte. À l'aide de ces hooks, vous pouvez contrôler l'initialisation, la mise à jour et la destruction de vos composants, ainsi que gérer leurs changements d'état.