Angular Academy · Урок

Очистка эффектов и жизненный цикл

Освобождайте ресурсы внутри эффектов.

«Очистка эффектов и жизненный цикл» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Почему очистка важна

Эффект может запускать ресурсы: таймеры, подписки и обработчики событий. При каждом повторном запуске эффекта старый ресурс необходимо сначала отключить, иначе произойдёт утечка таймеров и обработчиков. Angular предоставляет для этого обработчик onCleanup.

Функция обратного вызова onCleanup

Функция эффекта получает функцию onCleanup. Зарегистрируйте в ней функцию очистки; Angular вызовет её перед следующим запуском и при уничтожении.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

Очистка выполняется перед каждым повторным запуском

Когда зависимость изменяется, Angular сначала вызывает зарегистрированную функцию очистки, а затем снова выполняет тело эффекта. Благодаря этому одновременно активен только один ресурс.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

Очистка обработчиков событий

Обработчики DOM, добавленные в эффекте, необходимо удалять во время очистки, чтобы избежать дублирования обработчиков и утечек.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

Очистка подписок

Если эффект подписывается на Observable, отменяйте подписку во время очистки. (Часто для этого используют другие инструменты, но здесь показан сам принцип.)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

Очистка при уничтожении

Когда компонент, владеющий эффектом, уничтожается, Angular автоматически выполняет финальную очистку, а затем уничтожает эффект. Утёкших таймеров не останется.

Порядок: очистка, затем тело

При самом первом запуске эффекта очищать нечего. Начиная со второго запуска последовательность всегда одна и та же: очистка -> тело.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

Не выполняйте тяжёлую работу без очистки

У любого долгоживущего ресурса, запущенного в эффекте, должна быть соответствующая очистка. Распространённая ошибка — забыть об очистке, из-за чего интервалы накапливаются при каждом изменении зависимости.

Параметр manualCleanup

Для эффектов, созданных вне компонента (например, в корневом сервисе, который работает постоянно), можно использовать параметр manualCleanup, а затем самостоятельно вызвать ref.destroy() в подходящий момент.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef как альтернатива

Для очистки, не связанной с эффектами, можно внедрить DestroyRef и зарегистрировать функции с помощью onDestroy. Внутри эффектов для очистки при каждом запуске отдавайте предпочтение onCleanup.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

Собираем всё вместе

Эффект синхронизации с задержкой: каждое изменение значения отменяет предыдущий таймер и планирует новое сохранение.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

Быстрая проверка

Проверьте своё понимание очистки эффектов.

Итоги: очистка эффектов и жизненный цикл

Используйте параметр onCleanup, чтобы отключать ресурсы, запущенные внутри эффекта.

Очистка выполняется перед каждым повторным запуском и при уничтожении.
Всегда очищайте таймеры, обработчики и подписки.
manualCleanup предназначен для долгоживущих эффектов, а DestroyRef — для общей очистки.

Далее: linkedSignal и продвинутые шаблоны.

Часто задаваемые вопросы

Урок «Очистка эффектов и жизненный цикл» бесплатный?

Да — полный текст урока «Очистка эффектов и жизненный цикл» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Очистка эффектов и жизненный цикл»?

Освобождайте ресурсы внутри эффектов. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Очистка эффектов и жизненный цикл»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy