Opdag, hvordan du kører kode på forskellige punkter i dine komponenters livscyklus.

Nøgle takeaways

  • Sveltes livscykluskroge giver dig mulighed for at kontrollere de forskellige stadier af en komponents livscyklus, såsom initialisering, opdatering og destruktion.
  • De fire store livscykluskroge i Svelte er onMount, onDestroy, beforeUpdate og afterUpdate.
  • Ved at bruge disse livscyklushooks kan du udføre handlinger som at hente data, konfigurere hændelseslyttere, rydde op i ressourcer og opdatere brugergrænsefladen baseret på tilstandsændringer.

Svelte er en moderne JavaScript-ramme, der lader dig bygge effektive webapplikationer. En af Sveltes kritiske egenskaber er dens livscykluskroge, som giver dig kontrol over de forskellige stadier af en komponents livscyklus.

Hvad er livscykluskroge?

Livscykluskroge er metoder, der udløses på bestemte punkter i en komponents livscyklus. De giver dig mulighed for at udføre bestemte handlinger på disse punkter, såsom at initialisere komponenten, reagere på ændringer eller rydde op i ressourcer.

instagram viewer

Forskellige rammer har forskellige livscykluskroge, men de deler alle nogle fælles funktioner. Svelte tilbyder fire store livscykluskroge: på Mount, på Ødelæg, før opdatering, og efter opdatering.

Opsætning af et Svelte-projekt

For at forstå, hvordan du kan bruge Sveltes livscykluskroge, skal du starte med at oprette et Svelte-projekt. Det kan du gøre på forskellige måder, f.eks som ved at bruge Vite (et front-end byggeværktøj) eller degit. Degit er et kommandolinjeværktøj til at downloade og klone git-lagre uden at downloade hele git-historikken.

Brug af Vite

For at oprette et Svelte-projekt ved hjælp af Vite skal du køre følgende kommando i din terminal:

npm init vite

Når du har kørt kommandoen, vil du besvare nogle prompter for at angive dit projekts navn, den ramme, du vil bruge, og den specifikke variant af den ramme.

Naviger nu til projektets bibliotek og installer de nødvendige afhængigheder.

Kør følgende kommandoer for at gøre dette:

cd svelte-app
npm install

Brug af degit

For at konfigurere dit Svelte-projekt ved hjælp af degit, kør denne kommando i din terminal:

npx degit sveltejs/template svelte-app

Naviger derefter til projektets bibliotek og installer de nødvendige afhængigheder:

cd svelte-app
npm install

Arbejde med OnMount-krogen

Det på Mount krog er en vital livscykluskrog i Svelte. Svelte kalder onMount-krogen, når en komponent først gengives og indsættes i DOM. Det ligner componentDidMount livscyklusmetode i React-klassekomponenter eller useEffectkrog i React funktionelle komponenter med et tomt afhængighedsarray.

Du vil primært bruge onMount-krogen til at udføre initialiseringsopgaver, som f.eks hente data fra en API eller opsætning af begivenhedslyttere. OnMount-krogen er en funktion, der tager et enkelt argument. Dette argument er den funktion, som applikationen kalder, når den først gengiver komponenten.

Her er et eksempel på, hvordan du kan bruge onMount-krogen:

<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 projekt, oprette en src/Test.svelte fil og tilføje ovenstående kode til den. Denne kode importerer onMount-krogen fra Svelte og kalder den til at køre en simpel funktion, der logger tekst på konsollen. For at teste onMount-krogen skal du gengive Prøve komponent i din src/App.svelte fil:

For eksempel:

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

Kør derefter appen:

npm run dev

Hvis du kører denne kommando, får du en lokal URL som f.eks http://localhost: 8080. Besøg linket i en webbrowser for at se din ansøgning. Appen vil logge teksten "Komponent er blevet tilføjet til DOM" i din browsers konsol.

Arbejde med onDestroy Hook

Som det modsatte af på Mount krog, Svelte kalder den på Ødelæg krog, når den er ved at fjerne en komponent fra DOM. OnDestroy-krogen er nyttig til at rydde op i alle ressourcer eller begivenhedslyttere, du konfigurerer i løbet af komponentens livscyklus.

Denne krog ligner Reacts componentWillUnmount livscyklusmetode og dens useEffect krog med oprydningsfunktion.

Her er et eksempel på, hvordan du bruger onDestroy-krogen:

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

Denne kode starter en timer, der logger teksten "interval" til din browsers konsol hvert sekund. Den bruger onDestroy-krogen til at rydde intervallet, når komponenten forlader DOM. Dette forhindrer intervallet i at fortsætte med at køre, når komponenten ikke længere er nødvendig.

Arbejde med beforeUpdate og afterUpdate Hooks

Det før opdatering og efter opdatering hooks er livscyklusfunktioner, der kører før og efter DOM gennemgår en opdatering. Disse kroge er nyttige til at udføre handlinger baseret på tilstandsændringer, såsom opdatering af brugergrænsefladen eller udløsning af bivirkninger.

BeforeUpdate-hooken kører før DOM-opdateringen, og når som helst komponentens tilstand ændres. Det ligner getSnapshotBeforeUpdate i React klasse komponenter. Du bruger primært beforeUpdate-hook, når du sammenligner applikationens nye tilstand med dens gamle tilstand.

Nedenfor er et eksempel på, hvordan du bruger beforeUpdate-krogen:

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

Udskift koden i din Prøve komponent med kodeblokken ovenfor. Denne kode bruger beforeUpdate hook til at logge værdien af tælle tilstand før DOM opdateres. Hver gang du klikker på knappen, kører stigningsfunktionen og øger værdien af ​​tælletilstanden med 1. Dette får funktionen beforeUpdate til at køre og logge værdien af ​​tælletilstanden.

AfterUpdate-hooken kører efter DOM-opdateringer. Det bruges generelt til at køre kode, der skal ske efter DOM-opdateringerne. Denne krog ligner componentDidUpdate i React. AfterUpdate-krogen fungerer ligesom beforeUpdate-krogen.

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 bruger afterUpdate hook til at logge værdien af ​​tælletilstanden i stedet. Dette betyder, at den vil logge tælletilstanden efter DOM-opdateringerne.

Byg robuste apps ved hjælp af Sveltes livscykluskroge

Livscykluskrogene i Svelte er essentielle værktøjer, der bruges til at skabe dynamiske og responsive applikationer. At forstå livscykluskroge er en værdifuld del af Svelte-programmering. Ved at bruge disse kroge kan du styre initialiseringen, opdateringen og ødelæggelsen af ​​dine komponenter og håndtere deres tilstandsændringer.