Svelte Lifecycle Hooks: Hva er de og hvordan fungerer de?

Viktige takeaways

• Sveltes livssykluskroker lar deg kontrollere de forskjellige stadiene i en komponents livssyklus, for eksempel initialisering, oppdatering og ødeleggelse.
• De fire store livssykluskrokene i Svelte er onMount, onDestroy, beforeUpdate og afterUpdate.
• Ved å bruke disse livssykluskrokene kan du utføre handlinger som å hente data, sette opp hendelseslyttere, rydde opp i ressurser og oppdatere brukergrensesnittet basert på tilstandsendringer.

Svelte er et moderne JavaScript-rammeverk som lar deg bygge effektive webapplikasjoner. En av Sveltes kritiske funksjoner er livssykluskrokene som gir deg kontroll over de forskjellige stadiene i en komponents livssyklus.

Hva er livssykluskroker?

Livssykluskroker er metoder som utløses på bestemte punkter i livssyklusen til en komponent. De lar deg utføre bestemte handlinger på disse punktene, som å initialisere komponenten, svare på endringer eller rydde opp i ressurser.

Ulike rammeverk har forskjellige livssykluskroker, men de deler alle noen fellestrekk. Svelte tilbyr fire store livssykluskroker: på Mount, på Ødelegg, før oppdatering, og etteroppdatering.

Sette opp et Svelte-prosjekt

For å forstå hvordan du kan bruke Sveltes livssykluskroker, start med å lage et Svelte-prosjekt. Du kan gjøre dette på forskjellige måter, f.eks som å bruke Vite (et front-end byggeverktøy) eller degit. Degit er et kommandolinjeverktøy for å laste ned og klone git-lagre uten å laste ned hele git-historikken.

Bruker Vite

For å lage et Svelte-prosjekt ved hjelp av Vite, kjør følgende kommando i terminalen din:

npm init vite

Når du har kjørt kommandoen, vil du svare på noen spørsmål for å oppgi prosjektets navn, rammeverket du vil bruke og den spesifikke varianten av rammeverket.

Naviger nå til prosjektets katalog og installer de nødvendige avhengighetene.

Kjør følgende kommandoer for å gjøre dette:

cd svelte-app
npm install

Bruker degit

For å sette opp Svelte-prosjektet ditt ved å bruke degit, kjør denne kommandoen i terminalen din:

npx degit sveltejs/template svelte-app

Naviger deretter til prosjektets katalog og installer de nødvendige avhengighetene:

cd svelte-app
npm install

Arbeide med OnMount-kroken

De på Mount krok er en viktig livssykluskrok i Svelte. Svelte kaller onMount-kroken når en komponent først gjengis og settes inn i DOM. Det ligner på componentDidMount livssyklusmetode i React-klassekomponenter eller useEffecthekte inn React funksjonelle komponenter med en tom avhengighetsmatrise.

Du vil primært bruke onMount-kroken til å utføre initialiseringsoppgaver, som f.eks hente data fra et API eller sette opp arrangementslyttere. OnMount-kroken er en funksjon som tar et enkelt argument. Dette argumentet er funksjonen som applikasjonen kaller når den først gjengir komponenten.

Her er et eksempel på hvordan du kan bruke onMount-kroken:

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

I din svelte-app prosjekt, opprette en src/Test.svelte fil og legg til koden ovenfor til den. Denne koden importerer onMount-kroken fra Svelte og kaller den for å kjøre en enkel funksjon som logger tekst på konsollen. For å teste onMount-kroken, gjengi Test komponent i din src/App.svelte fil:

For eksempel:

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

Kjør deretter appen:

npm run dev

Å kjøre denne kommandoen vil gi deg en lokal URL som http://localhost: 8080. Gå til koblingen i en nettleser for å se applikasjonen din. Appen vil logge teksten "Komponent har blitt lagt til DOM" i nettleserens konsoll.

Arbeide med onDestroy Hook

Som det motsatte av på Mount krok, kaller Svelte den på Ødelegg hekte når den er i ferd med å fjerne en komponent fra DOM. OnDestroy-kroken er nyttig for å rydde opp i alle ressurser eller hendelseslyttere du setter opp i løpet av komponentens livssyklus.

Denne kroken ligner på React sin componentWillUnmount livssyklusmetoden og dens useEffect krok med oppryddingsfunksjon.

Her er et eksempel på hvordan du bruker onDestroy-kroken:

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

Denne koden starter en timer som logger teksten "intervall" til nettleserens konsoll hvert sekund. Den bruker onDestroy-kroken for å fjerne intervallet når komponenten forlater DOM. Dette forhindrer at intervallet fortsetter å kjøre når komponenten ikke lenger er nødvendig.

Arbeide med beforeUpdate- og afterUpdate-krokene

De før oppdatering og etteroppdatering kroker er livssyklusfunksjoner som kjører før og etter at DOM gjennomgår en oppdatering. Disse krokene er nyttige for å utføre handlinger basert på tilstandsendringer, for eksempel å oppdatere brukergrensesnittet eller utløse bivirkninger.

BeforeUpdate-kroken kjører før DOM-en oppdateres og når som helst komponentens tilstand endres. Det ligner på get SnapshotBeforeUpdate i React-klassens komponenter. Du bruker hovedsakelig beforeUpdate-kroken når du sammenligner applikasjonens nye tilstand med dens gamle tilstand.

Nedenfor er et eksempel på hvordan du bruker beforeUpdate-kroken:

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

Bytt ut koden i din Test komponent med kodeblokken ovenfor. Denne koden bruker beforeUpdate-kroken for å logge verdien av telle tilstand før DOM-en oppdateres. Hver gang du klikker på knappen, kjører inkrementfunksjonen og øker verdien av telletilstanden med 1. Dette fører til at beforeUpdate-funksjonen kjører og logger verdien av telletilstanden.

AfterUpdate-kroken kjører etter DOM-oppdateringene. Det brukes vanligvis for å kjøre kode som må skje etter DOM-oppdateringene. Denne kroken ligner på componentDidUpdate i React. AfterUpdate-kroken fungerer som beforeUpdate-kroken.

For eksempel:

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

Kodeblokken ovenfor ligner den forrige, men denne bruker afterUpdate-kroken for å logge verdien av telletilstanden i stedet. Dette betyr at den vil logge telletilstanden etter DOM-oppdateringene.

Bygg robuste apper ved å bruke Sveltes livssykluskroker

Livssykluskrokene i Svelte er essensielle verktøy som brukes til å lage dynamiske og responsive applikasjoner. Å forstå livssykluskroker er en verdifull del av Svelte-programmering. Ved å bruke disse krokene kan du kontrollere initialiseringen, oppdateringen og ødeleggelsen av komponentene dine, og håndtere tilstandsendringer.