Открийте как да изпълнявате код в различни точки от жизнения цикъл на вашите компоненти.

Ключови изводи

  • Кукичките за жизнения цикъл на Svelte ви позволяват да контролирате различните етапи от жизнения цикъл на компонента, като инициализация, актуализиране и унищожаване.
  • Четирите основни куки за жизнения цикъл в Svelte са onMount, onDestroy, beforeUpdate и afterUpdate.
  • Като използвате тези кукички за жизнения цикъл, можете да извършвате действия като извличане на данни, настройка на слушатели на събития, почистване на ресурси и актуализиране на потребителския интерфейс въз основа на промени в състоянието.

Svelte е модерна JavaScript рамка, която ви позволява да създавате ефективни уеб приложения. Една от критичните характеристики на Svelte са неговите кукички за жизнения цикъл, които ви осигуряват контрол върху различните етапи от жизнения цикъл на компонента.

Какво представляват куките за жизнения цикъл?

Кукичките на жизнения цикъл са методи, които се задействат в определени точки от жизнения цикъл на компонент. Те ви позволяват да извършвате определени действия в тези точки, като инициализиране на компонента, отговаряне на промени или почистване на ресурси.

instagram viewer

Различните рамки имат различни кукички за жизнения цикъл, но всички споделят някои общи характеристики. Svelte предлага четири основни куки за жизнения цикъл: onMount, onDestroy, beforeUpdate, и afterUpdate.

Създаване на изискан проект

За да разберете как можете да използвате куките за жизнения цикъл на Svelte, започнете със създаване на проект на Svelte. Можете да направите това по различни начини, напр като използване на Vite (инструмент за изграждане на предния край) или дегит. Degit е инструмент от командния ред за изтегляне и клониране на git хранилища, без да изтегляте цялата git история.

Използване на Vite

За да създадете проект Svelte с помощта на Vite, изпълнете следната команда във вашия терминал:

npm init vite

След като изпълните командата, ще отговорите на някои подкани, за да предоставите името на вашия проект, рамката, която искате да използвате, и конкретния вариант на тази рамка.

Сега отворете директорията на проекта и инсталирайте необходимите зависимости.

Изпълнете следните команди, за да направите това:

cd svelte-app
npm install

Използване на degit

За да настроите своя проект Svelte с помощта на degit, изпълнете тази команда във вашия терминал:

npx degit sveltejs/template svelte-app

След това отворете директорията на проекта и инсталирайте необходимите зависимости:

cd svelte-app
npm install

Работа с куката onMount

The onMount hook е жизненоважен hook за жизнения цикъл в Svelte. Svelte извиква куката onMount, когато даден компонент е изобразен за първи път и вмъкнат в DOM. То е подобно на componentDidMount метод на жизнения цикъл в компонентите на клас React или useEffectкука във функционалните компоненти на React с празен масив от зависимости.

Ще използвате главно onMount куката за изпълнение на задачи за инициализация, като напр извличане на данни от API или настройване на слушатели на събития. Куката onMount е функция, която приема един аргумент. Този аргумент е функцията, която приложението ще извика, когато за първи път изобрази компонента.

Ето пример за това как можете да използвате куката 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>

Във вашия изящно приложение проект, създайте a src/Test.svelte файл и добавете горния код към него. Този код импортира куката onMount от Svelte и я извиква, за да изпълни проста функция, която записва текст на конзолата. За да тествате куката onMount, изобразете Тест компонент във вашия src/App.svelte файл:

Например:

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

След това стартирайте приложението:

npm run dev

Изпълнението на тази команда ще ви предостави локален URL като http://localhost: 8080. Посетете връзката в уеб браузър, за да видите вашето приложение. Приложението ще регистрира текста „Компонентът е добавен към DOM“ в конзолата на вашия браузър.

Работа с куката onDestroy

Като обратното на onMount кука, Svelte нарича onDestroy hook, когато е на път да премахне компонент от DOM. Куката onDestroy е полезна за почистване на всички ресурси или слушатели на събития, които сте задали по време на жизнения цикъл на компонента.

Тази кука е подобна на тази на React componentWillUnmount метод на жизнения цикъл и неговите useEffect кука с функция за почистване.

Ето пример как да използвате куката onDestroy:

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

Този код стартира таймер, който записва текстовия „интервал“ в конзолата на вашия браузър всяка секунда. Той използва куката onDestroy, за да изчисти интервала, когато компонентът напусне DOM. Това не позволява интервалът да продължи да тече, когато компонентът вече не е необходим.

Работа с кукичките beforeUpdate и afterUpdate

The beforeUpdate и afterUpdate куките са функции от жизнения цикъл, които се изпълняват преди и след като DOM претърпи актуализация. Тези куки са полезни за извършване на действия въз основа на промени в състоянието, като например актуализиране на потребителския интерфейс или задействане на странични ефекти.

Закачалката beforeUpdate се изпълнява преди DOM да се актуализира и всеки път, когато състоянието на компонента се промени. То е подобно на getSnapshotBeforeUpdate в компонентите на клас React. Използвате главно куката beforeUpdate, когато сравнявате новото състояние на приложението със старото му състояние.

По-долу е даден пример как да използвате куката 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>

Заменете кода във вашия Тест компонент с кодовия блок по-горе. Този код използва куката beforeUpdate, за да регистрира стойността на броя състояние преди актуализациите на DOM. Всеки път, когато щракнете върху бутона, функцията за увеличаване се изпълнява и увеличава стойността на състоянието на броя с 1. Това кара функцията beforeUpdate да стартира и регистрира стойността на състоянието на броя.

Закачалката afterUpdate се изпълнява след актуализациите на DOM. Обикновено се използва за изпълнение на код, който трябва да се случи след актуализациите на DOM. Тази кука е подобна на componentDidUpdate в React. Закачалката afterUpdate работи като закачалката beforeUpdate.

Например:

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

Кодовият блок по-горе е подобен на предишния, но този вместо това използва куката afterUpdate, за да регистрира стойността на състоянието на броя. Това означава, че ще регистрира състоянието на броя след актуализациите на DOM.

Създавайте стабилни приложения, като използвате куките за жизнения цикъл на Svelte

Куките за жизнения цикъл в Svelte са основни инструменти, използвани за създаване на динамични и отзивчиви приложения. Разбирането на куките на жизнения цикъл е ценна част от програмирането на Svelte. Използвайки тези кукички, можете да контролирате инициализирането, актуализирането и унищожаването на вашите компоненти и да управлявате промените в тяхното състояние.