Fedezze fel, hogyan futtathat kódot összetevői életciklusának különböző pontjain.

Kulcs elvitelek

  • A Svelte életciklus-horogjai lehetővé teszik az összetevő életciklusának különböző szakaszainak vezérlését, például az inicializálást, a frissítést és a megsemmisítést.
  • A Svelte négy fő életciklus-horogja az onMount, onDestroy, beforeUpdate és afterUpdate.
  • Ezen életciklus-horogok használatával olyan műveleteket hajthat végre, mint az adatok lekérése, az eseményfigyelők beállítása, az erőforrások megtisztítása és a felhasználói felület állapotváltozások alapján történő frissítése.

A Svelte egy modern JavaScript-keretrendszer, amely lehetővé teszi hatékony webalkalmazások készítését. A Svelte egyik kritikus jellemzője az életciklus-kampók, amelyek lehetővé teszik az alkatrész életciklusának különböző szakaszai feletti irányítást.

Mik azok az életciklus horgok?

Az életciklus-horgok olyan módszerek, amelyek egy komponens életciklusának meghatározott pontjain aktiválódnak. Lehetővé teszik bizonyos műveletek végrehajtását ezeken a pontokon, például az összetevő inicializálását, a változásokra való reagálást vagy az erőforrások tisztítását.

instagram viewer

A különböző keretrendszerek különböző életciklus-horogokkal rendelkeznek, de mindegyiknek van néhány közös jellemzője. A Svelte négy fő életciklus-kampót kínál: onMount, onDestroy, Frissítés előtt, és frissítés után.

Svelte projekt felállítása

Ahhoz, hogy megértse, hogyan használhatja a Svelte életciklus-kampóit, kezdje el egy Svelte projekt létrehozásával. Ezt többféleképpen megteheti, pl mint a Vite (egy front-end build eszköz) használata vagy degit. A Degit egy parancssori eszköz a git-tárolók letöltéséhez és klónozásához anélkül, hogy a teljes git-előzményt letöltené.

Vite használata

Ha Svelte projektet szeretne létrehozni a Vite használatával, futtassa a következő parancsot a terminálon:

npm init vite

A parancs futtatása után néhány kérdésre válaszolva megadja a projekt nevét, a használni kívánt keretrendszert és a keretrendszer konkrét változatát.

Most keresse meg a projekt könyvtárát, és telepítse a szükséges függőségeket.

Ehhez futtassa a következő parancsokat:

cd svelte-app
npm install

A degit segítségével

A Svelte projekt degit használatával történő beállításához futtassa ezt a parancsot a terminálon:

npx degit sveltejs/template svelte-app

Ezután keresse meg a projekt könyvtárát, és telepítse a szükséges függőségeket:

cd svelte-app
npm install

Munka az onMount Hook segítségével

A onMount A hook a Svelte életciklusának létfontosságú horogja. A Svelte meghívja az onMount hook-ot, amikor egy komponenst először renderelnek és beillesztenek a DOM-ba. Hasonló a komponentDidMount életciklus metódus a React osztály komponenseiben vagy a useEffectakassza be a React funkcionális komponenseket üres függőségi tömbbel.

Elsősorban az onMount hookot fogja használni inicializálási feladatok elvégzésére, mint pl adatok lekérése egy API-ból vagy eseményfigyelők beállítása. Az onMount hook egy olyan függvény, amely egyetlen argumentumot vesz fel. Ez az argumentum az a függvény, amelyet az alkalmazás akkor hív meg, amikor először rendereli az összetevőt.

Íme egy példa az onMount horog használatára:

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

A tiédben karcsú-app projekt, hozzon létre a src/Test.svelte fájlt, és adja hozzá a fenti kódot. Ez a kód importálja az onMount hookot a Svelte-ből, és meghívja egy egyszerű függvény futtatására, amely naplózza a szöveget a konzolon. Az onMount horog teszteléséhez jelenítse meg a Teszt összetevő a te src/App.svelte fájl:

Például:

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

Ezután futtassa az alkalmazást:

npm run dev

A parancs futtatása egy helyi URL-t biztosít, mint például http://localhost: 8080. Keresse fel a linket egy webböngészőben az alkalmazás megtekintéséhez. Az alkalmazás naplózza az „Összetevő hozzáadva a DOM-hoz” szöveget a böngésző konzoljában.

Munka az onDestroy Hook segítségével

Ellentéteként a onMount horog, Svelte hívja a onDestroy horog, amikor egy alkatrészt készül eltávolítani a DOM-ból. Az onDestroy hook hasznos az összetevő életciklusa során beállított erőforrások vagy eseményfigyelők tisztításához.

Ez a horog hasonló a Reactéhoz komponentWillUnmount életciklus módszer és annak useEffect horog tisztító funkcióval.

Íme egy példa az onDestroy hook használatára:

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

Ez a kód elindít egy időzítőt, amely másodpercenként naplózza az „intervallum” szöveget a böngésző konzoljára. Az onDestroy hook segítségével törli az intervallumot, amikor az összetevő elhagyja a DOM-ot. Ez megakadályozza, hogy az intervallum fusson tovább, amikor az összetevőre már nincs szükség.

Munka a beforeUpdate és afterUpdate horgokkal

A Frissítés előtt és frissítés után A hookok olyan életciklus-funkciók, amelyek a DOM frissítése előtt és után futnak. Ezek a hookok hasznosak az állapotváltozásokon alapuló műveletek végrehajtásához, például a felhasználói felület frissítéséhez vagy mellékhatások kiváltásához.

A beforeUpdate hook a DOM frissítése előtt fut, és bármikor, amikor az összetevő állapota megváltozik. Ez hasonló getSnapshotBeforeUpdate a React osztály komponenseiben. Főleg a beforeUpdate hookot használja, amikor az alkalmazás új állapotát a régi állapotával hasonlítja össze.

Az alábbiakban egy példa látható a beforeUpdate hook használatára:

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

Cserélje ki a kódot Teszt komponens a fenti kódblokkkal. Ez a kód a beforeUpdate hook segítségével naplózza az értékét számol állapot a DOM frissítése előtt. Minden alkalommal, amikor a gombra kattint, a növekmény funkció lefut, és 1-gyel növeli a számlálási állapot értékét. Ez azt eredményezi, hogy a beforeUpdate függvény lefut, és naplózza a számlálási állapot értékét.

Az afterUpdate hook a DOM-frissítések után fut. Általában olyan kód futtatására használják, amelynek meg kell történnie a DOM-frissítések után. Ez a horog hasonló a komponentDidUpdate a Reactban. Az afterUpdate hook úgy működik, mint a beforeUpdate hook.

Például:

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

A fenti kódblokk hasonló az előzőhöz, de ez az afterUpdate hook segítségével naplózza a számlálási állapot értékét. Ez azt jelenti, hogy a DOM-frissítések után naplózza a számlálási állapotot.

Építsen robusztus alkalmazásokat a Svelte Lifecycle Hook segítségével

A Svelte életciklus-kampói alapvető eszközök a dinamikus és érzékeny alkalmazások létrehozásához. Az életciklus-horogok megértése a Svelte programozás értékes része. Ezekkel a horgokkal szabályozhatja az összetevők inicializálását, frissítését és megsemmisítését, valamint kezelheti állapotváltozásaikat.