Svelte Lifecycle Hooks: Was sind sie und wie funktionieren sie?

Die zentralen Thesen

• Mit den Lebenszyklus-Hooks von Svelte können Sie die verschiedenen Phasen des Lebenszyklus einer Komponente steuern, z. B. Initialisierung, Aktualisierung und Zerstörung.
• Die vier wichtigsten Lebenszyklus-Hooks in Svelte sind onMount, onDestroy, beforeUpdate und afterUpdate.
• Mithilfe dieser Lebenszyklus-Hooks können Sie Aktionen wie das Abrufen von Daten, das Einrichten von Ereignis-Listenern, das Bereinigen von Ressourcen und das Aktualisieren der Benutzeroberfläche basierend auf Statusänderungen ausführen.

Svelte ist ein modernes JavaScript-Framework, mit dem Sie effiziente Webanwendungen erstellen können. Eine der entscheidenden Funktionen von Svelte sind seine Lifecycle-Hooks, die Ihnen die Kontrolle über die verschiedenen Phasen des Lebenszyklus einer Komponente ermöglichen.

Was sind Lifecycle-Hooks?

Lebenszyklus-Hooks sind Methoden, die an bestimmten Punkten im Lebenszyklus einer Komponente ausgelöst werden. Sie ermöglichen es Ihnen, an diesen Stellen bestimmte Aktionen durchzuführen, z. B. die Komponente zu initialisieren, auf Änderungen zu reagieren oder Ressourcen zu bereinigen.

Verschiedene Frameworks haben unterschiedliche Lebenszyklus-Hooks, aber alle haben einige gemeinsame Funktionen. Svelte bietet vier wichtige Lifecycle-Hooks: onMount, onDestroy, vorUpdate, Und nach dem Update.

Einrichten eines Svelte-Projekts

Um zu verstehen, wie Sie die Lebenszyklus-Hooks von Svelte verwenden können, erstellen Sie zunächst ein Svelte-Projekt. Sie können dies auf verschiedene Arten tun, z wie die Verwendung von Vite (ein Front-End-Build-Tool) oder degit. Degit ist ein Befehlszeilentool zum Herunterladen und Klonen von Git-Repositorys, ohne den gesamten Git-Verlauf herunterzuladen.

Mit Vite

Um ein Svelte-Projekt mit Vite zu erstellen, führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm init vite

Sobald Sie den Befehl ausführen, werden Sie aufgefordert, den Namen Ihres Projekts, das Framework, das Sie verwenden möchten, und die spezifische Variante dieses Frameworks anzugeben.

Navigieren Sie nun zum Projektverzeichnis und installieren Sie die erforderlichen Abhängigkeiten.

Führen Sie dazu die folgenden Befehle aus:

cd svelte-app
npm install

Degit verwenden

Um Ihr Svelte-Projekt mit degit einzurichten, führen Sie diesen Befehl in Ihrem Terminal aus:

npx degit sveltejs/template svelte-app

Navigieren Sie dann zum Verzeichnis des Projekts und installieren Sie die erforderlichen Abhängigkeiten:

cd svelte-app
npm install

Arbeiten mit dem onMount-Hook

Der onMount Hook ist ein wichtiger Lebenszyklus-Hook in Svelte. Svelte ruft den onMount-Hook auf, wenn eine Komponente zum ersten Mal gerendert und in das DOM eingefügt wird. Es ähnelt dem ComponentDidMount Lebenszyklusmethode in React-Klassenkomponenten oder der useEffectHaken Sie React-Funktionskomponenten ein mit einem leeren Abhängigkeitsarray.

Sie verwenden den onMount-Hook hauptsächlich zum Ausführen von Initialisierungsaufgaben, z Abrufen von Daten von einer API oder Ereignis-Listener einrichten. Der onMount-Hook ist eine Funktion, die ein einzelnes Argument akzeptiert. Dieses Argument ist die Funktion, die die Anwendung aufruft, wenn sie die Komponente zum ersten Mal rendert.

Hier ist ein Beispiel dafür, wie Sie den onMount-Hook verwenden können:

<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 deinem schlanke-App Projekt, erstellen Sie ein src/Test.svelte Datei und fügen Sie den obigen Code hinzu. Dieser Code importiert den onMount-Hook von Svelte und ruft ihn auf, um eine einfache Funktion auszuführen Protokolliert Text auf der Konsole. Um den onMount-Hook zu testen, rendern Sie den Prüfen Komponente in Ihrem src/App.svelte Datei:

Zum Beispiel:

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

Führen Sie dann die App aus:

npm run dev

Wenn Sie diesen Befehl ausführen, erhalten Sie eine lokale URL wie http://localhost: 8080. Besuchen Sie den Link in einem Webbrowser, um Ihre Bewerbung anzuzeigen. Die App protokolliert den Text „Komponente wurde zum DOM hinzugefügt“ in der Konsole Ihres Browsers.

Arbeiten mit dem onDestroy-Hook

Als Gegenteil von onMount Haken, Svelte nennt das onDestroy Hook, wenn eine Komponente aus dem DOM entfernt werden soll. Der onDestroy-Hook ist nützlich, um alle Ressourcen oder Ereignis-Listener zu bereinigen, die Sie während des Lebenszyklus der Komponente eingerichtet haben.

Dieser Hook ähnelt dem von React ComponentWillUnmount Lebenszyklusmethode und ihre useEffect Haken mit Aufräumfunktion.

Hier ist ein Beispiel für die Verwendung des onDestroy-Hooks:

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

Dieser Code startet einen Timer, der jede Sekunde den Text „Intervall“ in der Konsole Ihres Browsers protokolliert. Es verwendet den onDestroy-Hook, um das Intervall zu löschen, wenn die Komponente das DOM verlässt. Dadurch wird verhindert, dass das Intervall weiterläuft, wenn die Komponente nicht mehr benötigt wird.

Arbeiten mit den Hooks beforeUpdate und afterUpdate

Der vorUpdate Und nach dem Update Hooks sind Lebenszyklusfunktionen, die vor und nach einer Aktualisierung des DOM ausgeführt werden. Diese Hooks sind nützlich, um Aktionen basierend auf Statusänderungen auszuführen, z. B. das Aktualisieren der Benutzeroberfläche oder das Auslösen von Nebenwirkungen.

Der beforeUpdate-Hook wird vor der DOM-Aktualisierung und immer dann ausgeführt, wenn sich der Status der Komponente ändert. Das ist vergleichbar mit getSnapshotBeforeUpdate in Komponenten der React-Klasse. Sie verwenden den beforeUpdate-Hook hauptsächlich, wenn Sie den neuen Status der Anwendung mit ihrem alten Status vergleichen.

Nachfolgend finden Sie ein Beispiel für die Verwendung des beforeUpdate-Hooks:

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

Ersetzen Sie den Code in Ihrem Prüfen Komponente mit dem Codeblock oben. Dieser Code verwendet den beforeUpdate-Hook, um den Wert von zu protokollieren zählen Status vor der DOM-Aktualisierung. Jedes Mal, wenn Sie auf die Schaltfläche klicken, wird die Inkrementierungsfunktion ausgeführt und erhöht den Wert des Zählstatus um 1. Dadurch wird die Funktion beforeUpdate ausgeführt und der Wert des Zählstatus protokolliert.

Der AfterUpdate-Hook wird nach den DOM-Updates ausgeführt. Es wird im Allgemeinen zum Ausführen von Code verwendet, der nach den DOM-Updates ausgeführt werden muss. Dieser Haken ähnelt ComponentDidUpdate in Reagieren. Der AfterUpdate-Hook funktioniert wie der BeforeUpdate-Hook.

Zum Beispiel:

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

Der obige Codeblock ähnelt dem vorherigen, verwendet jedoch stattdessen den AfterUpdate-Hook, um den Wert des Zählstatus zu protokollieren. Dies bedeutet, dass der Zählstatus nach den DOM-Updates protokolliert wird.

Erstellen Sie robuste Apps mit den Lifecycle Hooks von Svelte

Die Lifecycle-Hooks in Svelte sind wesentliche Werkzeuge zum Erstellen dynamischer und reaktionsfähiger Anwendungen. Das Verständnis von Lifecycle-Hooks ist ein wertvoller Teil der Svelte-Programmierung. Mithilfe dieser Hooks können Sie die Initialisierung, Aktualisierung und Zerstörung Ihrer Komponenten steuern und deren Statusänderungen verarbeiten.