Svelte Lifecycle Háčky: Co to je a jak fungují?

Klíčové věci

• Háky životního cyklu Svelte vám umožňují ovládat různé fáze životního cyklu komponenty, jako je inicializace, aktualizace a zničení.
• Čtyři hlavní háčky životního cyklu ve Svelte jsou onMount, onDestroy, beforeUpdate a afterUpdate.
• Pomocí těchto háčků životního cyklu můžete provádět akce, jako je načítání dat, nastavení posluchačů událostí, čištění zdrojů a aktualizace uživatelského rozhraní na základě změn stavu.

Svelte je moderní framework JavaScript, který vám umožní vytvářet efektivní webové aplikace. Jednou z kritických vlastností Svelte jsou její háčky životního cyklu, které vám poskytují kontrolu nad různými fázemi životního cyklu součásti.

Co jsou háky životního cyklu?

Háky životního cyklu jsou metody, které se spouštějí v určitých bodech životního cyklu komponenty. Umožňují vám v těchto bodech provádět konkrétní akce, jako je inicializace součásti, reakce na změny nebo čištění prostředků.

Různé rámce mají různé háčky životního cyklu, ale všechny sdílejí některé společné rysy. Svelte nabízí čtyři hlavní háčky životního cyklu: onMount, onDestroy, před aktualizací, a po aktualizaci.

Nastavení projektu Svelte

Abyste pochopili, jak můžete používat háčky životního cyklu Svelte, začněte vytvořením projektu Svelte. Můžete to udělat různými způsoby, např jako použití Vite (front-endový nástroj pro vytváření) nebo číslice. Degit je nástroj příkazového řádku pro stahování a klonování git repozitářů bez stahování celé historie git.

Pomocí Vite

Chcete-li vytvořit projekt Svelte pomocí Vite, spusťte ve svém terminálu následující příkaz:

npm init vite

Jakmile příkaz spustíte, odpovíte na některé výzvy k zadání názvu projektu, rámce, který chcete použít, a konkrétní varianty tohoto rámce.

Nyní přejděte do adresáře projektu a nainstalujte potřebné závislosti.

Chcete-li to provést, spusťte následující příkazy:

cd svelte-app
npm install

Pomocí degit

Chcete-li nastavit svůj projekt Svelte pomocí degit, spusťte tento příkaz ve svém terminálu:

npx degit sveltejs/template svelte-app

Poté přejděte do adresáře projektu a nainstalujte potřebné závislosti:

cd svelte-app
npm install

Práce s onMount Hook

The onMount hák je ve Svelte zásadním háčkem životního cyklu. Svelte volá háček onMount, když je komponenta poprvé vykreslena a vložena do DOM. Je to podobné jako u komponentDidMount metoda životního cyklu v komponentách třídy React nebo v useEffectzaháknout funkční komponenty React s prázdným polem závislostí.

OnMount hook využijete především k provádění inicializačních úloh, jako je např načítání dat z API nebo nastavení posluchačů událostí. Hák onMount je funkce, která přebírá jeden argument. Tento argument je funkce, kterou aplikace zavolá při prvním vykreslení komponenty.

Zde je příklad, jak můžete použít háček 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>

Ve vašem štíhlá aplikace projekt, vytvořit a src/Test.svelte soubor a přidejte do něj výše uvedený kód. Tento kód importuje hák onMount ze Svelte a volá jej, aby spustil jednoduchou funkci, která zaznamená text na konzoli. Chcete-li otestovat hák onMount, vykreslete soubor Test součást ve vašem src/App.svelte soubor:

Například:

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

Poté spusťte aplikaci:

npm run dev

Spuštěním tohoto příkazu získáte místní adresu URL jako http://localhost: 8080. Chcete-li zobrazit aplikaci, přejděte na odkaz ve webovém prohlížeči. Aplikace zaznamená do konzoly vašeho prohlížeče text „Komponenta byla přidána do DOM“.

Práce s hákem onDestroy

Jako opak k onMount hák, volá Svelte onDestroy hák, když se chystá odstranit komponentu z DOM. Hák onDestroy je užitečný pro čištění všech zdrojů nebo posluchačů událostí, které jste nastavili během životního cyklu komponenty.

Tento háček je podobný jako u Reactu componentWillUnmount metoda životního cyklu a její useEffect háček s funkcí čištění.

Zde je příklad použití háčku onDestroy:

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

Tento kód spustí časovač, který každou sekundu zaznamenává text „interval“ do konzole vašeho prohlížeče. Používá háček onDestroy k vymazání intervalu, kdy komponenta opustí DOM. To zabrání tomu, aby interval pokračoval v běhu, když komponenta již není potřeba.

Práce s háčky beforeUpdate a afterUpdate

The před aktualizací a po aktualizaci háčky jsou funkce životního cyklu, které běží před a po aktualizaci DOM. Tyto háčky jsou užitečné pro provádění akcí na základě změn stavu, jako je aktualizace uživatelského rozhraní nebo spouštění vedlejších efektů.

Háček beforeUpdate se spustí před aktualizací modelu DOM a kdykoli se změní stav komponenty. Je to podobné jako getSnapshotBeforeUpdate v komponentách třídy React. Háček beforeUpdate používáte hlavně při porovnávání nového stavu aplikace se starým stavem.

Níže je uveden příklad, jak použít háček 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>

Nahraďte kód ve svém Test komponentu s blokem kódu výše. Tento kód používá háček beforeUpdate k protokolování hodnoty počet stavu před aktualizací DOM. Při každém kliknutí na tlačítko se spustí funkce inkrementace a zvýší hodnotu stavu počítání o 1. To způsobí, že se funkce beforeUpdate spustí a zaprotokoluje hodnotu stavu počítání.

AfterUpdate hook se spustí po aktualizacích DOM. Obecně se používá pro spouštění kódu, který se musí stát po aktualizacích DOM. Tento háček je podobný componentDidUpdate v Reactu. Háček afterUpdate funguje jako háček beforeUpdate.

Například:

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

Blok kódu výše je podobný předchozímu, ale tento používá háček afterUpdate k protokolování hodnoty stavu počtu. To znamená, že po aktualizacích DOM zaznamená stav počtu.

Vytvářejte robustní aplikace pomocí Svelte's Lifecycle Hooks

Háčky životního cyklu ve Svelte jsou základními nástroji používanými k vytváření dynamických a citlivých aplikací. Pochopení háčků životního cyklu je cennou součástí programování Svelte. Pomocí těchto háčků můžete řídit inicializaci, aktualizaci a zničení vašich součástí a zpracovávat změny jejich stavu.