Dowiedz się, jak uruchamiać kod na różnych etapach cyklu życia komponentów.

Kluczowe dania na wynos

  • Haki cyklu życia Svelte pozwalają kontrolować różne etapy cyklu życia komponentu, takie jak inicjalizacja, aktualizacja i niszczenie.
  • Cztery główne haki cyklu życia w Svelte to onMount, onDestroy, beforeUpdate i afterUpdate.
  • Korzystając z tych haków cyklu życia, możesz wykonywać czynności, takie jak pobieranie danych, konfigurowanie detektorów zdarzeń, czyszczenie zasobów i aktualizowanie interfejsu użytkownika na podstawie zmian stanu.

Svelte to nowoczesny framework JavaScript, który pozwala budować wydajne aplikacje internetowe. Jedną z kluczowych funkcji Svelte są haki cyklu życia, które zapewniają kontrolę nad różnymi etapami cyklu życia komponentu.

Czym są hooki cyklu życia?

Haki cyklu życia to metody uruchamiane w określonych momentach cyklu życia komponentu. Umożliwiają wykonanie w tych punktach określonych działań, takich jak inicjowanie komponentu, reagowanie na zmiany lub czyszczenie zasobów.

instagram viewer

Różne frameworki mają różne haki cyklu życia, ale wszystkie mają pewne wspólne cechy. Svelte oferuje cztery główne haki cyklu życia: naMount, naZniszcz, przed aktualizacją, I po aktualizacji.

Konfigurowanie smukłego projektu

Aby zrozumieć, w jaki sposób możesz wykorzystać haki cyklu życia Svelte, zacznij od stworzenia projektu Svelte. Można to zrobić na różne sposoby, np jak przy użyciu Vite (narzędzie do tworzenia front-endu) lub cyfra. Degit to narzędzie wiersza poleceń umożliwiające pobieranie i klonowanie repozytoriów git bez konieczności pobierania całej historii git.

Korzystanie z Vite'a

Aby utworzyć projekt Svelte za pomocą Vite, uruchom następujące polecenie w swoim terminalu:

npm init vite

Po uruchomieniu polecenia odpowiesz na kilka monitów o podanie nazwy projektu, struktury, której chcesz użyć, oraz konkretnego wariantu tego środowiska.

Teraz przejdź do katalogu projektu i zainstaluj niezbędne zależności.

Aby to zrobić, uruchom następujące polecenia:

cd svelte-app
npm install

Używając degitu

Aby skonfigurować projekt Svelte za pomocą degit, uruchom tę komendę w terminalu:

npx degit sveltejs/template svelte-app

Następnie przejdź do katalogu projektu i zainstaluj niezbędne zależności:

cd svelte-app
npm install

Praca z hakiem onMount

The naMount hak jest istotnym hakiem cyklu życia w Svelte. Svelte wywołuje funkcję onMount, gdy komponent jest renderowany po raz pierwszy i wstawiany do modelu DOM. Jest podobny do komponentDidMount metoda cyklu życia w komponentach klasy React lub użyjEfektuzaczep komponenty funkcjonalne React z pustą tablicą zależności.

Hook onMount będzie używany głównie do wykonywania zadań inicjujących, takich jak pobieranie danych z API lub konfigurowanie detektorów zdarzeń. Hak onMount to funkcja, która przyjmuje pojedynczy argument. Ten argument jest funkcją, którą aplikacja wywoła podczas pierwszego renderowania komponentu.

Oto przykład użycia haka onMount:

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

W Twoim szczupła aplikacja projekt, utwórz plik src/Test.svelte plik i dodaj do niego powyższy kod. Ten kod importuje hak onMount ze Svelte i wywołuje go w celu uruchomienia prostej funkcji, która rejestruje tekst na konsoli. Aby przetestować hak onMount, wyrenderuj plik Test komponent w twoim src/App.svelte plik:

Na przykład:

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

Następnie uruchom aplikację:

npm run dev

Uruchomienie tego polecenia spowoduje wyświetlenie lokalnego adresu URL, takiego jak http://localhost: 8080. Kliknij łącze w przeglądarce internetowej, aby wyświetlić swoją aplikację. Aplikacja zapisze w konsoli przeglądarki komunikat „Komponent został dodany do DOM”.

Praca z hakiem onDestroy

Jako przeciwieństwo naMount hak, Svelte woła naZniszcz hook, gdy ma zamiar usunąć komponent z modelu DOM. Hak onDestroy jest przydatny do czyszczenia wszelkich zasobów lub detektorów zdarzeń skonfigurowanych podczas cyklu życia komponentu.

Ten hak jest podobny do haka React komponentWillUnmount Metoda cyklu życia i jej elementy użyjEfektu hak z funkcją czyszczenia.

Oto przykład użycia haka onDestroy:

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

Ten kod uruchamia licznik, który co sekundę rejestruje tekst „interwał” w konsoli przeglądarki. Używa haka onDestroy do czyszczenia interwału, gdy komponent opuszcza DOM. Zapobiega to dalszemu działaniu interwału, gdy komponent nie jest już potrzebny.

Praca z hakami beforeUpdate i afterUpdate

The przed aktualizacją I po aktualizacji hooki to funkcje cyklu życia, które działają przed i po aktualizacji modelu DOM. Te haczyki są przydatne do wykonywania akcji opartych na zmianach stanu, takich jak aktualizacja interfejsu użytkownika lub wyzwalanie efektów ubocznych.

Hak beforeUpdate działa przed aktualizacją DOM i za każdym razem, gdy zmienia się stan komponentu. To jest podobne do pobierz SnapshotBeforeUpdate w komponentach klasy React. Haczyka beforeUpdate używasz głównie podczas porównywania nowego stanu aplikacji z jej starym stanem.

Poniżej znajduje się przykład użycia haka beforeUpdate:

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

Zamień kod w swoim Test komponent z powyższym blokiem kodu. Ten kod używa haka beforeUpdate do rejestrowania wartości pliku liczyć stan przed aktualizacją DOM. Za każdym razem, gdy klikniesz przycisk, zostanie uruchomiona funkcja inkrementacji, która zwiększy wartość stanu licznika o 1. Powoduje to uruchomienie funkcji beforeUpdate i zarejestrowanie wartości stanu licznika.

Hak afterUpdate działa po aktualizacji DOM. Zwykle jest używany do uruchamiania kodu, który musi nastąpić po aktualizacjach DOM. Ten hak jest podobny do komponentDidUpdate w Reagowaniu. Hak afterUpdate działa podobnie jak hak beforeUpdate.

Na przykład:

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

Powyższy blok kodu jest podobny do poprzedniego, ale ten używa haka afterUpdate do rejestrowania wartości stanu licznika. Oznacza to, że będzie rejestrował stan licznika po aktualizacji DOM.

Twórz niezawodne aplikacje, korzystając z haków cyklu życia Svelte

Haki cyklu życia w Svelte to niezbędne narzędzia używane do tworzenia dynamicznych i responsywnych aplikacji. Zrozumienie haków cyklu życia jest cenną częścią programowania Svelte. Za pomocą tych zaczepów możesz kontrolować inicjalizację, aktualizację i niszczenie komponentów oraz obsługiwać zmiany ich stanu.