Upptäck hur du kör kod vid olika punkter i dina komponenters livscykel.

Viktiga takeaways

  • Sveltes livscykelhakar låter dig kontrollera de olika stadierna av en komponents livscykel, såsom initiering, uppdatering och förstörelse.
  • De fyra stora livscykelhakarna i Svelte är onMount, onDestroy, beforeUpdate och afterUpdate.
  • Genom att använda dessa livscykelhakar kan du utföra åtgärder som att hämta data, ställa in händelseavlyssnare, rensa upp resurser och uppdatera användargränssnittet baserat på tillståndsändringar.

Svelte är ett modernt JavaScript-ramverk som låter dig bygga effektiva webbapplikationer. En av Sveltes kritiska egenskaper är dess livscykelhakar som ger dig kontroll över de olika stadierna av en komponents livscykel.

Vad är livscykelkrokar?

Livscykelhakar är metoder som utlöses vid specifika punkter i en komponents livscykel. De låter dig utföra särskilda åtgärder vid dessa punkter, som att initiera komponenten, svara på ändringar eller rensa resurser.

Olika ramverk har olika livscykelkrokar, men de delar alla några gemensamma egenskaper. Svelte erbjuder fyra stora livscykelkrokar:

instagram viewer
onMount, på förstöra, före uppdatering, och efter uppdatering.

Skapa ett Svelte-projekt

För att förstå hur du kan använda Sveltes livscykelkrokar, börja med att skapa ett Svelte-projekt. Du kan göra detta på olika sätt, t.ex som att använda Vite (ett front-end-byggverktyg) eller degit. Degit är ett kommandoradsverktyg för att ladda ner och klona git-förråd utan att ladda ner hela git-historiken.

Använder Vite

För att skapa ett Svelte-projekt med Vite, kör följande kommando i din terminal:

npm init vite

När du kör kommandot kommer du att svara på några uppmaningar för att ange ditt projekts namn, ramverket du vill använda och den specifika varianten av det ramverket.

Navigera nu till projektets katalog och installera nödvändiga beroenden.

Kör följande kommandon för att göra detta:

cd svelte-app
npm install

Använder degit

För att ställa in ditt Svelte-projekt med degit, kör detta kommando i din terminal:

npx degit sveltejs/template svelte-app

Navigera sedan till projektets katalog och installera nödvändiga beroenden:

cd svelte-app
npm install

Arbeta med OnMount-kroken

De onMount krok är en viktig livscykelkrok i Svelte. Svelte anropar onMount-kroken när en komponent först renderas och infogas i DOM. Det liknar componentDidMount livscykelmetod i React-klasskomponenter eller useEffecthaka i React funktionskomponenter med en tom beroendematris.

Du kommer i första hand att använda onMount-kroken för att utföra initialiseringsuppgifter, som t.ex hämta data från ett API eller ställa in evenemangslyssnare. OnMount-kroken är en funktion som tar ett enda argument. Detta argument är den funktion som applikationen anropar när den först renderar komponenten.

Här är ett exempel på hur du kan använda 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 projekt, skapa ett src/Test.svelte fil och lägg till ovanstående kod till den. Denna kod importerar onMount-kroken från Svelte och kallar den för att köra en enkel funktion som loggar text på konsolen. För att testa onMount-kroken, rendera Testa komponent i din src/App.svelte fil:

Till exempel:

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

Kör sedan appen:

npm run dev

Om du kör det här kommandot får du en lokal URL som http://localhost: 8080. Besök länken i en webbläsare för att se din ansökan. Appen loggar texten "Komponent har lagts till i DOM" i din webbläsares konsol.

Arbeta med OnDestroy Hook

Som motsatsen till onMount krok, kallar Svelte den på förstöra krok när det är på väg att ta bort en komponent från DOM. OnDestroy-kroken är användbar för att rensa upp alla resurser eller händelseavlyssnare du ställer in under komponentens livscykel.

Denna krok liknar Reacts componentWillUnmount livscykelmetoden och dess useEffect krok med rensningsfunktion.

Här är ett exempel på hur man använder onDestroy-kroken:

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

Denna kod startar en timer som loggar texten "intervall" till din webbläsares konsol varje sekund. Den använder onDestroy-kroken för att rensa intervallet när komponenten lämnar DOM. Detta förhindrar att intervallet fortsätter att köras när komponenten inte längre behövs.

Arbeta med beforeUpdate och afterUpdate Hooks

De före uppdatering och efter uppdatering krokar är livscykelfunktioner som körs före och efter att DOM genomgår en uppdatering. Dessa krokar är användbara för att utföra åtgärder baserade på tillståndsändringar, som att uppdatera användargränssnittet eller utlösa biverkningar.

BeforeUpdate-kroken körs innan DOM uppdateras och när som helst komponentens tillstånd ändras. Det liknar getSnapshotBeforeUpdate i React-klasskomponenter. Du använder främst beforeUpdate-kroken när du jämför programmets nya tillstånd med dess gamla tillstånd.

Nedan är ett exempel på hur du använder 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>

Byt ut koden i din Testa komponent med kodblocket ovan. Den här koden använder beforeUpdate-kroken för att logga värdet på räkna tillstånd innan DOM uppdateras. Varje gång du klickar på knappen körs inkrementfunktionen och ökar värdet på räknetillståndet med 1. Detta gör att funktionen beforeUpdate körs och loggar värdet för räknetillståndet.

AfterUpdate-kroken körs efter DOM-uppdateringarna. Det används vanligtvis för att köra kod som måste ske efter DOM-uppdateringarna. Denna krok liknar componentDidUpdate i React. AfterUpdate-kroken fungerar som beforeUpdate-kroken.

Till exempel:

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

Kodblocket ovan liknar det föregående, men det här använder afterUpdate-kroken för att logga värdet för räknetillståndet istället. Detta betyder att det kommer att logga räkningstillståndet efter DOM-uppdateringarna.

Bygg robusta appar med Sveltes livscykelkrokar

Livscykelkrokarna i Svelte är viktiga verktyg som används för att skapa dynamiska och responsiva applikationer. Att förstå livscykelkrokar är en värdefull del av Svelte-programmering. Med dessa krokar kan du styra initieringen, uppdateringen och förstörelsen av dina komponenter och hantera deras tillståndsändringar.