Svelte Lifecycle Hooks: cosa sono e come funzionano?

Punti chiave

• Gli hook del ciclo di vita di Svelte ti consentono di controllare le diverse fasi del ciclo di vita di un componente, come inizializzazione, aggiornamento e distruzione.
• I quattro principali hook del ciclo di vita in Svelte sono onMount, onDestroy, beforeUpdate e afterUpdate.
• Utilizzando questi hook del ciclo di vita, puoi eseguire azioni come il recupero di dati, la configurazione di ascoltatori di eventi, la pulizia delle risorse e l'aggiornamento dell'interfaccia utente in base alle modifiche dello stato.

Svelte è un moderno framework JavaScript che ti consente di creare applicazioni web efficienti. Una delle caratteristiche fondamentali di Svelte sono i suoi hook del ciclo di vita che forniscono il controllo sulle diverse fasi del ciclo di vita di un componente.

Cosa sono gli hook del ciclo di vita?

Gli hook del ciclo di vita sono metodi che si attivano in punti specifici del ciclo di vita di un componente. Consentono di eseguire azioni particolari in questi punti, come inizializzare il componente, rispondere alle modifiche o pulire le risorse.

Framework diversi hanno hook del ciclo di vita diversi, ma condividono tutti alcune caratteristiche comuni. Svelte offre quattro principali hook del ciclo di vita: sul Monte, onDestroy, prima dell'aggiornamento, E dopo l'aggiornamento.

Impostazione di un progetto snello

Per capire come utilizzare gli hook del ciclo di vita di Svelte, inizia creando un progetto Svelte. Puoi farlo in vari modi, ad esempio come usare Vite (uno strumento di creazione front-end) o cifra. Degit è uno strumento da riga di comando per scaricare e clonare repository git senza scaricare l'intera cronologia git.

Utilizzando Vite

Per creare un progetto Svelte utilizzando Vite, esegui il seguente comando nel tuo terminale:

npm init vite

Una volta eseguito il comando, risponderai ad alcune richieste per fornire il nome del tuo progetto, il framework che desideri utilizzare e la variante specifica di quel framework.

Ora vai alla directory del progetto e installa le dipendenze necessarie.

Esegui i seguenti comandi per farlo:

cd svelte-app
npm install

Utilizzando cifra

Per impostare il tuo progetto Svelte utilizzando degit, esegui questo comando nel tuo terminale:

npx degit sveltejs/template svelte-app

Quindi, vai alla directory del progetto e installa le dipendenze necessarie:

cd svelte-app
npm install

Lavorare con il gancio onMount

IL sul Monte hook è un hook vitale del ciclo di vita in Svelte. Svelte chiama l'hook onMount quando un componente viene prima renderizzato e inserito nel DOM. È simile al componenteDidMount metodo del ciclo di vita nei componenti della classe React o nel file useEffectagganciare i componenti funzionali di React con un array di dipendenze vuoto.

Utilizzerai principalmente l'hook onMount per eseguire attività di inizializzazione, ad esempio recuperare i dati da un'API o impostare ascoltatori di eventi. L'hook onMount è una funzione che accetta un singolo argomento. Questo argomento è la funzione che l'applicazione chiamerà la prima volta che esegue il rendering del componente.

Ecco un esempio di come è possibile utilizzare l'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>

Nel tuo svelte-app progetto, creare un src/Test.svelte file e aggiungivi il codice sopra. Questo codice importa l'hook onMount da Svelte e lo chiama per eseguire una semplice funzione that registra il testo sulla console. Per testare l'hook onMount, renderizzare il file Test componente nel tuo src/App.svelte file:

Per esempio:

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

Quindi esegui l'app:

npm run dev

L'esecuzione di questo comando ti fornirà un URL locale come http://localhost: 8080. Visitare il collegamento in un browser Web per visualizzare l'applicazione. L'app registrerà il testo "Il componente è stato aggiunto al DOM" nella console del tuo browser.

Lavorare con il gancio onDestroy

Come il contrario di sul Monte gancio, Svelte chiama il onDestroy hook quando sta per rimuovere un componente dal DOM. L'hook onDestroy è utile per ripulire qualsiasi risorsa o ascoltatore di eventi configurato durante il ciclo di vita del componente.

Questo hook è simile a quello di React componenteWillUnmount metodo del ciclo di vita e suoi useEffect gancio con una funzione di pulizia.

Ecco un esempio di come utilizzare l'hook onDestroy:

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

Questo codice avvia un timer che registra ogni secondo il testo "intervallo" sulla console del tuo browser. Utilizza l'hook onDestroy per cancellare l'intervallo quando il componente lascia il DOM. Ciò impedisce che l'intervallo continui a essere eseguito quando il componente non è più necessario.

Lavorare con gli hook beforeUpdate e afterUpdate

IL prima dell'aggiornamento E dopo l'aggiornamento gli hook sono funzioni del ciclo di vita che vengono eseguite prima e dopo che il DOM subisce un aggiornamento. Questi hook sono utili per eseguire azioni basate sui cambiamenti di stato, come l'aggiornamento dell'interfaccia utente o l'attivazione di effetti collaterali.

L'hook beforeUpdate viene eseguito prima degli aggiornamenti del DOM e ogni volta che lo stato del componente cambia. È simile a getSnapshotBeforeUpdate nei componenti della classe React. Utilizzi principalmente l'hook beforeUpdate quando confronti il ​​nuovo stato dell'applicazione con il suo vecchio stato.

Di seguito è riportato un esempio di come utilizzare l'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>

Sostituisci il codice nel tuo Test componente con il blocco di codice sopra. Questo codice utilizza l'hook beforeUpdate per registrare il valore di contare stato prima degli aggiornamenti del DOM. Ogni volta che si fa clic sul pulsante, viene eseguita la funzione di incremento che aumenta il valore dello stato di conteggio di 1. Ciò fa sì che la funzione beforeUpdate venga eseguita e registri il valore dello stato del conteggio.

L'hook afterUpdate viene eseguito dopo gli aggiornamenti del DOM. Viene generalmente utilizzato per l'esecuzione di codice che deve avvenire dopo gli aggiornamenti del DOM. Questo gancio è simile a componenteDidUpdate in Reagire. L'hook afterUpdate funziona come l'hook beforeUpdate.

Per esempio:

<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>

Il blocco di codice sopra è simile al precedente, ma questo utilizza invece l'hook afterUpdate per registrare il valore dello stato del conteggio. Ciò significa che registrerà lo stato del conteggio dopo gli aggiornamenti del DOM.

Crea app robuste utilizzando gli hook del ciclo di vita di Svelte

Gli hook del ciclo di vita in Svelte sono strumenti essenziali utilizzati per creare applicazioni dinamiche e reattive. Comprendere gli hook del ciclo di vita è una parte preziosa della programmazione Svelte. Utilizzando questi hook, puoi controllare l'inizializzazione, l'aggiornamento e la distruzione dei tuoi componenti e gestire i relativi cambiamenti di stato.