Svelte Lifecycle Hooks: wat zijn ze en hoe werken ze?

Belangrijkste leerpunten

• Met de levenscyclushaken van Svelte kunt u de verschillende fasen van de levenscyclus van een component beheren, zoals initialisatie, updaten en vernietiging.
• De vier belangrijkste levenscyclushaken in Svelte zijn onMount, onDestroy, beforeUpdate en afterUpdate.
• Door deze lifecycle hooks te gebruiken, kunt u acties uitvoeren zoals het ophalen van gegevens, het instellen van gebeurtenislisteners, het opschonen van bronnen en het bijwerken van de gebruikersinterface op basis van statuswijzigingen.

Svelte is een modern JavaScript-framework waarmee u efficiënte webapplicaties kunt bouwen. Een van de belangrijkste kenmerken van Svelte zijn de levenscyclushaken die u controle geven over de verschillende fasen van de levenscyclus van een component.

Wat zijn levenscyclushaken?

Lifecycle hooks zijn methoden die op specifieke punten in de levenscyclus van een component worden geactiveerd. Hiermee kunt u op deze punten bepaalde acties uitvoeren, zoals het initialiseren van de component, het reageren op wijzigingen of het opschonen van bronnen.

Verschillende raamwerken hebben verschillende levenscyclushaken, maar ze hebben allemaal een aantal gemeenschappelijke kenmerken. Svelte biedt vier belangrijke levenscyclushaken: opMount, opVernietigen, vóór Update, En naupdate.

Een slank project opzetten

Om te begrijpen hoe u de levenscyclushaken van Svelte kunt gebruiken, begint u met het maken van een Svelte-project. Je kunt dit op verschillende manieren doen, bijv zoals bij gebruik van Vite (een front-end build-tool) of degit. Degit is een opdrachtregelprogramma waarmee je git-repository's kunt downloaden en klonen zonder de hele git-geschiedenis te downloaden.

Vité gebruiken

Om een ​​Svelte-project te maken met Vite, voert u de volgende opdracht uit in uw terminal:

npm init vite

Zodra u de opdracht uitvoert, beantwoordt u enkele aanwijzingen om de naam van uw project, het raamwerk dat u wilt gebruiken en de specifieke variant van dat raamwerk op te geven.

Navigeer nu naar de map van het project en installeer de benodigde afhankelijkheden.

Voer hiervoor de volgende opdrachten uit:

cd svelte-app
npm install

Met behulp van degit

Om uw Svelte-project in te stellen met degit, voert u deze opdracht uit in uw terminal:

npx degit sveltejs/template svelte-app

Navigeer vervolgens naar de map van het project en installeer de benodigde afhankelijkheden:

cd svelte-app
npm install

Werken met de onMount-haak

De opMount haak is een essentiële levenscyclushaak in Svelte. Svelte roept de onMount hook aan wanneer een component voor het eerst wordt weergegeven en in de DOM wordt ingevoegd. Het is vergelijkbaar met de componentDidMount levenscyclusmethode in React-klassecomponenten of de gebruikEffecthaak functionele React-componenten in met een lege afhankelijkheidsarray.

U zult de onMount hook voornamelijk gebruiken om initialisatietaken uit te voeren, zoals gegevens ophalen uit een API of het instellen van gebeurtenislisteners. De onMount hook is een functie waaraan één enkel argument moet doorgegeven worden. Dit argument is de functie die de toepassing zal aanroepen wanneer de component voor het eerst wordt weergegeven.

Hier is een voorbeeld van hoe u de onMount-haak kunt gebruiken:

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

In uw slanke-app project, maak een src/Test.svelte bestand en voeg de bovenstaande code eraan toe. Deze code importeert de onMount hook van Svelte en roept deze aan om een ​​eenvoudige functie uit te voeren logt tekst op de console. Om de onMount-hook te testen, rendert u het Test onderdeel in uw src/App.svelte bestand:

Bijvoorbeeld:

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

Voer vervolgens de app uit:

npm run dev

Als u deze opdracht uitvoert, krijgt u een lokale URL zoals http://localhost: 8080. Ga naar de link in een webbrowser om uw aanvraag te bekijken. De app registreert de tekst “Component is toegevoegd aan de DOM” in de console van uw browser.

Werken met de onDestroy Hook

Als het tegenovergestelde van de opMount hook, Svelte noemt de opVernietigen hook wanneer het op het punt staat een component uit de DOM te verwijderen. De onDestroy-hook is handig voor het opschonen van alle bronnen of gebeurtenislisteners die u tijdens de levenscyclus van het onderdeel hebt ingesteld.

Deze haak is vergelijkbaar met die van React componentWillUnmount levenscyclusmethode en zijn gebruikEffect haak met een opruimfunctie.

Hier is een voorbeeld van hoe je de onDestroy hook gebruikt:

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

Deze code start een timer die elke seconde de tekst ‘interval’ in de console van uw browser registreert. Het gebruikt de onDestroy hook om het interval te wissen wanneer de component de DOM verlaat. Dit voorkomt dat het interval blijft lopen als het onderdeel niet langer nodig is.

Werken met de beforeUpdate- en afterUpdate-hooks

De vóór Update En naupdate hooks zijn levenscyclusfuncties die worden uitgevoerd voordat en nadat de DOM een update ondergaat. Deze hooks zijn handig voor het uitvoeren van acties op basis van statuswijzigingen, zoals het bijwerken van de gebruikersinterface of het activeren van bijwerkingen.

De beforeUpdate-hook wordt uitgevoerd voordat de DOM wordt bijgewerkt en telkens wanneer de status van de component verandert. Het lijkt op getSnapshotBeforeUpdate in React-klassecomponenten. Je gebruikt voornamelijk de beforeUpdate hook bij het vergelijken van de nieuwe staat van de applicatie met de oude staat.

Hieronder ziet u een voorbeeld van hoe u de beforeUpdate-hook gebruikt:

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

Vervang de code in uw Test component met het bovenstaande codeblok. Deze code gebruikt de hook beforeUpdate om de waarde van de graaf status vóór de DOM-updates. Elke keer dat u op de knop klikt, wordt de ophoogfunctie uitgevoerd en wordt de waarde van de telstatus met 1 verhoogd. Hierdoor wordt de functie beforeUpdate uitgevoerd en wordt de waarde van de telstatus geregistreerd.

De afterUpdate-hook wordt uitgevoerd nadat de DOM-updates zijn uitgevoerd. Het wordt over het algemeen gebruikt voor het uitvoeren van code die moet gebeuren na de DOM-updates. Deze haak is vergelijkbaar met componentDidUpdate in Reageer. De hook afterUpdate werkt net als de hook beforeUpdate.

Bijvoorbeeld:

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

Het bovenstaande codeblok is vergelijkbaar met het vorige, maar dit gebruikt in plaats daarvan de hook afterUpdate om de waarde van de telstatus te loggen. Dit betekent dat het de telstatus registreert na de DOM-updates.

Bouw robuuste apps met behulp van de Lifecycle Hooks van Svelte

De levenscyclushaken in Svelte zijn essentiële hulpmiddelen die worden gebruikt om dynamische en responsieve applicaties te creëren. Het begrijpen van levenscyclushaken is een waardevol onderdeel van Svelte-programmering. Met behulp van deze hooks kunt u de initialisatie, update en vernietiging van uw componenten beheren en hun statuswijzigingen afhandelen.