Cârlige svelte pentru ciclul de viață: ce sunt și cum funcționează?

Recomandări cheie

• Cârligele ciclului de viață Svelte vă permit să controlați diferitele etape ale ciclului de viață al unei componente, cum ar fi inițializarea, actualizarea și distrugerea.
• Cele patru cârlige majore ale ciclului de viață din Svelte sunt onMount, onDestroy, beforeUpdate și afterUpdate.
• Folosind aceste cârlige ciclului de viață, puteți efectua acțiuni precum preluarea datelor, configurarea ascultătorilor de evenimente, curățarea resurselor și actualizarea interfeței de utilizare pe baza modificărilor de stare.

Svelte este un cadru JavaScript modern care vă permite să construiți aplicații web eficiente. Una dintre caracteristicile critice ale Svelte este cârligele sale pentru ciclul de viață, care vă oferă control asupra diferitelor etape ale ciclului de viață al unei componente.

Ce sunt cârligele ciclului de viață?

Cârligele ciclului de viață sunt metode care se declanșează în anumite puncte ale ciclului de viață al unei componente. Acestea vă permit să efectuați anumite acțiuni în aceste puncte, cum ar fi inițializarea componentei, răspunsul la modificări sau curățarea resurselor.

Cadrele diferite au cârlige de ciclu de viață diferite, dar toate au unele caracteristici comune. Svelte oferă patru cârlige majore pentru ciclul de viață: onMount, onDestroy, beforeUpdate, și afterUpdate.

Stabilirea unui proiect Svelte

Pentru a înțelege cum puteți utiliza cârligele ciclului de viață ale lui Svelte, începeți prin a crea un proiect Svelte. Puteți face acest lucru în diferite moduri, de exemplu ca folosind Vite (un instrument de construire front-end) sau cifre. Degit este un instrument de linie de comandă pentru a descărca și clona depozitele git fără a descărca întregul istoric git.

Folosind Vite

Pentru a crea un proiect Svelte folosind Vite, rulați următoarea comandă în terminalul dvs.:

npm init vite

După ce rulați comanda, veți răspunde la unele solicitări pentru a furniza numele proiectului, cadrul pe care doriți să îl utilizați și varianta specifică a acelui cadru.

Acum, navigați la directorul proiectului și instalați dependențele necesare.

Rulați următoarele comenzi pentru a face acest lucru:

cd svelte-app
npm install

Folosind cifre

Pentru a vă configura proiectul Svelte folosind degit, rulați această comandă în terminalul dvs.:

npx degit sveltejs/template svelte-app

Apoi, navigați la directorul proiectului și instalați dependențele necesare:

cd svelte-app
npm install

Lucrul cu cârligul onMount

The onMount cârlig este un cârlig vital pentru ciclul de viață în Svelte. Svelte apelează hook-ul onMount atunci când o componentă este prima dată redată și inserată în DOM. Este asemănător cu componentDidMount metoda ciclului de viață în componentele clasei React sau useEffectagățați componentele funcționale React cu o matrice de dependențe goală.

Veți folosi în primul rând cârligul onMount pentru a efectua sarcini de inițializare, cum ar fi preluarea datelor dintr-un API sau configurarea ascultătorilor de evenimente. Cârligul onMount este o funcție care ia un singur argument. Acest argument este funcția pe care aplicația o va apela atunci când redă prima componentă.

Iată un exemplu despre cum puteți utiliza cârligul 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>

În dumneavoastră svelte-app proiect, creați un src/Test.svelte fișier și adăugați codul de mai sus. Acest cod importă cârligul onMount de la Svelte și îl apelează pentru a rula o funcție simplă care înregistrează text pe consolă. Pentru a testa cârligul onMount, redați Test componentă în dvs src/App.svelte fişier:

De exemplu:

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

Apoi rulați aplicația:

npm run dev

Rularea acestei comenzi vă va oferi o adresă URL locală, cum ar fi http://localhost: 8080. Accesați linkul într-un browser web pentru a vizualiza aplicația dvs. Aplicația va înregistra textul „Componenta a fost adăugată la DOM” în consola browserului dumneavoastră.

Lucrul cu cârligul onDestroy

Ca opusul onMount cârlig, îi spune Svelte onDestroy cârlig atunci când este pe cale să scoată o componentă din DOM. Cârligul onDestroy este util pentru curățarea oricăror resurse sau ascultători de evenimente pe care i-ați configurat în timpul ciclului de viață al componentei.

Acest cârlig este similar cu al lui React componentWillUnmount metoda ciclului de viață și a acesteia useEffect cârlig cu funcție de curățare.

Iată un exemplu de utilizare a cârligului onDestroy:

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

Acest cod pornește un temporizator care înregistrează în fiecare secundă textul „interval” pe consola browserului dumneavoastră. Utilizează cârligul onDestroy pentru a șterge intervalul în care componenta părăsește DOM. Acest lucru previne intervalul de a continua să ruleze atunci când componenta nu mai este necesară.

Lucrul cu cârligele beforeUpdate și afterUpdate

The beforeUpdate și afterUpdate cârligele sunt funcții ciclului de viață care rulează înainte și după ce DOM este supus unei actualizări. Aceste cârlige sunt utile pentru a efectua acțiuni bazate pe modificări de stare, cum ar fi actualizarea interfeței de utilizare sau declanșarea efectelor secundare.

Cârligul beforeUpdate rulează înainte ca DOM-ul să se actualizeze și oricând se schimbă starea componentei. Este similar cu getSnapshotBeforeUpdate în componentele clasei React. Utilizați în principal cârligul beforeUpdate atunci când comparați noua stare a aplicației cu cea veche.

Mai jos este un exemplu de utilizare a cârligului 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>

Înlocuiți codul din dvs Test componentă cu blocul de cod de mai sus. Acest cod folosește cârligul beforeUpdate pentru a înregistra valoarea lui numara stare înainte de actualizările DOM. De fiecare dată când faceți clic pe buton, funcția de creștere rulează și crește valoarea stării de numărare cu 1. Acest lucru face ca funcția beforeUpdate să ruleze și să înregistreze valoarea stării de numărare.

Cârligul afterUpdate rulează după actualizările DOM. În general, este folosit pentru rularea codului care trebuie să se întâmple după actualizările DOM. Acest cârlig este similar cu componentDidUpdate în React. Cârligul afterUpdate funcționează ca și cârligul beforeUpdate.

De exemplu:

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

Blocul de cod de mai sus este similar cu cel anterior, dar acesta folosește cârligul afterUpdate pentru a înregistra valoarea stării de numărare. Aceasta înseamnă că va înregistra starea numărării după actualizările DOM.

Creați aplicații robuste utilizând cârligele Svelte pentru ciclul de viață

Cârligele ciclului de viață din Svelte sunt instrumente esențiale utilizate pentru a crea aplicații dinamice și receptive. Înțelegerea cârligelor ciclului de viață este o parte valoroasă a programării Svelte. Folosind aceste cârlige, puteți controla inițializarea, actualizarea și distrugerea componentelor dvs. și puteți gestiona modificările stării acestora.