Узнайте, как запускать код на различных этапах жизненного цикла ваших компонентов.

Ключевые выводы

  • Перехватчики жизненного цикла Svelte позволяют вам контролировать различные этапы жизненного цикла компонента, такие как инициализация, обновление и уничтожение.
  • Четыре основных перехватчика жизненного цикла в Svelte — это onMount, onDestroy, beforeUpdate и afterUpdate.
  • Используя эти перехватчики жизненного цикла, вы можете выполнять такие действия, как получение данных, настройку прослушивателей событий, очистку ресурсов и обновление пользовательского интерфейса на основе изменений состояния.

Svelte — это современная среда JavaScript, позволяющая создавать эффективные веб-приложения. Одной из важнейших особенностей Svelte являются перехватчики жизненного цикла, которые позволяют вам контролировать различные этапы жизненного цикла компонента.

Что такое крючки жизненного цикла?

Перехватчики жизненного цикла — это методы, которые срабатывают в определенных точках жизненного цикла компонента. Они позволяют вам выполнять в этих точках определенные действия, такие как инициализация компонента, реагирование на изменения или очистка ресурсов.

instagram viewer

Разные фреймворки имеют разные перехватчики жизненного цикла, но все они имеют некоторые общие черты. Svelte предлагает четыре основных крючка жизненного цикла: onMount, onDestroy, до обновления, и после обновления.

Настройка проекта Svelte

Чтобы понять, как можно использовать перехватчики жизненного цикла Svelte, начните с создания проекта Svelte. Вы можете сделать это разными способами, например как при использовании Vite (инструмент сборки внешнего интерфейса) или цифра. Degit — это инструмент командной строки для загрузки и клонирования репозиториев git без загрузки всей истории git.

Использование Вите

Чтобы создать проект Svelte с использованием Vite, выполните в терминале следующую команду:

npm init vite

После запуска команды вы ответите на несколько запросов, указав название вашего проекта, платформу, которую вы хотите использовать, и конкретный вариант этой платформы.

Теперь перейдите в каталог проекта и установите необходимые зависимости.

Для этого выполните следующие команды:

cd svelte-app
npm install

Использование цифры

Чтобы настроить проект Svelte с использованием degit, запустите эту команду в своем терминале:

npx degit sveltejs/template svelte-app

Затем перейдите в каталог проекта и установите необходимые зависимости:

cd svelte-app
npm install

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

onMount Хук — это жизненно важный крючок жизненного цикла в Svelte. Svelte вызывает перехватчик onMount, когда компонент впервые визуализируется и вставляется в DOM. Это похоже на компонентДидМаунт метод жизненного цикла в компонентах класса React или использованиеЭффектперехват в функциональных компонентах 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>

В вашей svelte-приложение проект, создать 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 перехватчик, когда он собирается удалить компонент из DOM. Перехват onDestroy полезен для очистки любых ресурсов или прослушивателей событий, которые вы настроили в течение жизненного цикла компонента.

Этот хук похож на хук React. компонентВиллунмонт метод жизненного цикла и его использованиеЭффект хук с функцией очистки.

Вот пример использования хука onDestroy:

<script>
import { onDestroy } from "svelte";
let intervalId;

intervalId = setInterval(() => {
console.log("interval");
}, 1000);

onDestroy(() => {
clearInterval(intervalId);
});
script>

Этот код запускает таймер, который каждую секунду записывает текстовый «интервал» в консоль вашего браузера. Он использует перехватчик onDestroy для очистки интервала, когда компонент покидает DOM. Это предотвращает продолжение выполнения интервала, когда компонент больше не нужен.

Работа с хуками 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. Этот крючок похож на компонентДидОбдате в Реакте. Перехват 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. Используя эти перехватчики, вы можете управлять инициализацией, обновлением и уничтожением ваших компонентов, а также обрабатывать изменения их состояния.