Zistite, ako spustiť kód v rôznych bodoch životného cyklu vašich komponentov.

Kľúčové informácie

  • Háčiky životného cyklu Svelte vám umožňujú ovládať rôzne fázy životného cyklu komponentu, ako je inicializácia, aktualizácia a zničenie.
  • Štyri hlavné háčiky životného cyklu v Svelte sú onMount, onDestroy, beforeUpdate a afterUpdate.
  • Použitím týchto hákov životného cyklu môžete vykonávať akcie, ako je načítanie údajov, nastavenie poslucháčov udalostí, čistenie zdrojov a aktualizácia používateľského rozhrania na základe zmien stavu.

Svelte je moderný rámec JavaScriptu, ktorý vám umožňuje vytvárať efektívne webové aplikácie. Jednou z kritických vlastností Svelte sú háčiky životného cyklu, ktoré vám poskytujú kontrolu nad rôznymi fázami životného cyklu komponentov.

Čo sú to háky životného cyklu?

Háky životného cyklu sú metódy, ktoré sa spúšťajú v konkrétnych bodoch životného cyklu komponentu. Umožňujú vám v týchto bodoch vykonávať konkrétne akcie, ako je inicializácia komponentu, reakcia na zmeny alebo čistenie zdrojov.

instagram viewer

Rôzne rámce majú rôzne háčiky životného cyklu, ale všetky zdieľajú niektoré spoločné črty. Svelte ponúka štyri hlavné háčiky životného cyklu: onMount, onDestroy, predaktualizáciou, a po aktualizácii.

Nastavenie štíhleho projektu

Ak chcete pochopiť, ako môžete použiť háčiky životného cyklu Svelte, začnite vytvorením projektu Svelte. Môžete to urobiť rôznymi spôsobmi, napr ako používanie Vite (front-end nástroj na zostavovanie) alebo číslica. Degit je nástroj príkazového riadka na sťahovanie a klonovanie git repozitárov bez sťahovania celej histórie git.

Pomocou Vite

Ak chcete vytvoriť projekt Svelte pomocou Vite, spustite vo svojom termináli nasledujúci príkaz:

npm init vite

Po spustení príkazu odpoviete na niektoré výzvy, aby ste poskytli názov projektu, rámec, ktorý chcete použiť, a konkrétny variant tohto rámca.

Teraz prejdite do adresára projektu a nainštalujte potrebné závislosti.

Ak to chcete urobiť, spustite nasledujúce príkazy:

cd svelte-app
npm install

Pomocou číslic

Ak chcete nastaviť svoj projekt Svelte pomocou degit, spustite tento príkaz vo svojom termináli:

npx degit sveltejs/template svelte-app

Potom prejdite do adresára projektu a nainštalujte potrebné závislosti:

cd svelte-app
npm install

Práca s hákom onMount

The onMount hák je v Svelte dôležitým životným cyklom. Svelte volá háčik onMount, keď je komponent prvýkrát vykreslený a vložený do DOM. Je to podobné ako komponentDidMount metóda životného cyklu v komponentoch triedy React alebo v useEffectzavesiť funkčné komponenty React s prázdnym poľom závislostí.

OnMount hook využijete predovšetkým na vykonávanie inicializačných úloh, ako napr získavanie údajov z API alebo nastavenie poslucháčov udalostí. Hák onMount je funkcia, ktorá má jeden argument. Tento argument je funkcia, ktorú aplikácia zavolá pri prvom vykreslení komponentu.

Tu je príklad, ako môžete použiť hák 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>

V tvojom štíhla aplikácia projekt, vytvorte a src/Test.svelte súbor a pridajte doň vyššie uvedený kód. Tento kód importuje hák onMount zo Svelte a volá ho na spustenie jednoduchej funkcie, ktorá zaznamená text na konzole. Ak chcete otestovať hák onMount, vyrenderujte súbor Test komponent vo vašom src/App.svelte súbor:

Napríklad:

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

Potom spustite aplikáciu:

npm run dev

Spustenie tohto príkazu vám poskytne miestnu adresu URL, napr http://localhost: 8080. Navštívte odkaz vo webovom prehliadači a zobrazte svoju aplikáciu. Aplikácia zaznamená do konzoly vášho prehliadača text „Komponent bol pridaný do DOM“.

Práca s hákom onDestroy

Ako opak k onMount hák, volá Svelte onDestroy háčik, keď sa chystáte odstrániť komponent z DOM. Hák onDestroy je užitočný na vyčistenie akýchkoľvek zdrojov alebo poslucháčov udalostí, ktoré ste nastavili počas životného cyklu komponentu.

Tento háčik je podobný ako u Reactu componentWillUnmount metóda životného cyklu a jej useEffect hák s funkciou čistenia.

Tu je príklad použitia 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č, ktorý každú sekundu zaznamená text „interval“ do konzoly vášho prehliadača. Používa hák onDestroy na vymazanie intervalu, keď komponent opustí DOM. To zabraňuje tomu, aby sa interval ďalej spúšťal, keď komponent už nie je potrebný.

Práca s háčikmi pred aktualizáciou a po aktualizácii

The predaktualizáciou a po aktualizácii háčiky sú funkcie životného cyklu, ktoré sa spúšťajú pred a po aktualizácii modelu DOM. Tieto háky sú užitočné na vykonávanie akcií na základe zmien stavu, ako je aktualizácia používateľského rozhrania alebo spúšťanie vedľajších účinkov.

Hák beforeUpdate sa spustí pred aktualizáciou modelu DOM a kedykoľvek sa zmení stav komponentu. Je to podobné ako getSnapshotBeforeUpdate v komponentoch triedy React. Háčik beforeUpdate používate hlavne pri porovnávaní nového stavu aplikácie so starým stavom.

Nižšie je uvedený príklad použitia háčika 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 vo svojom Test komponent s blokom kódu vyššie. Tento kód používa háčik beforeUpdate na zaznamenanie hodnoty počítať stav pred aktualizáciou modelu DOM. Zakaždým, keď kliknete na tlačidlo, spustí sa funkcia zvýšenia a zvýši hodnotu stavu počítania o 1. To spôsobí spustenie funkcie beforeUpdate a zaprotokolovanie hodnoty stavu počítania.

AfterUpdate hák sa spustí po aktualizáciách DOM. Vo všeobecnosti sa používa na spustenie kódu, ktorý sa musí uskutočniť po aktualizáciách DOM. Tento hák je podobný componentDidUpdate v React. Háčik afterUpdate funguje ako háčik beforeUpdate.

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

Vyššie uvedený blok kódu je podobný predchádzajúcemu, ale tento používa háčik afterUpdate na zaznamenávanie hodnoty stavu počtu. To znamená, že po aktualizáciách DOM zaznamená stav počtu.

Vytvárajte robustné aplikácie pomocou Svelte's Lifecycle Hákov

Háčiky životného cyklu v Svelte sú základné nástroje používané na vytváranie dynamických a citlivých aplikácií. Pochopenie háčikov životného cyklu je cennou súčasťou programovania Svelte. Pomocou týchto háčikov môžete ovládať inicializáciu, aktualizáciu a zničenie vašich komponentov a zvládnuť zmeny ich stavu.