Angular Academy · Урок

Эффекты и побочные эффекты

Реагируйте на изменения сигналов с помощью эффектов.

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

Что такое эффект

effect() выполняет функцию каждый раз, когда изменяется любой прочитанный ею сигнал. В отличие от computed, эффекты предназначены для побочных эффектов: ведения журналов, синхронизации с localStorage, вызова API и изменения DOM.

Эффекты не возвращают значение.

Создание эффекта

Эффект выполняется один раз сразу, а затем повторяется при каждом изменении отслеживаемого сигнала.

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Эффекту нужен контекст внедрения

По умолчанию effect() необходимо создавать в контексте внедрения — обычно в конструкторе или при инициализации поля компонента, директивы или сервиса.

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

Автоматическое отслеживание зависимостей

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

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

Синхронизация сигналов с localStorage

Классический вариант использования эффекта — сохранять состояние при каждом его изменении.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Эффекты не возвращают значения

Если Вам нужно производное значение, используйте computed(). Эффекты предназначены для действий без возвращаемого значения: их результатом является сам побочный эффект.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Изменение сигналов внутри эффектов

По умолчанию Angular запрещает изменять сигналы внутри эффекта, чтобы предотвращать циклы. Если это действительно необходимо, передайте { allowSignalWrites: true }, но для вычислений отдавайте предпочтение computed.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

Ручная очистка с помощью EffectRef

effect() возвращает EffectRef. Вызовите .destroy(), чтобы вручную остановить эффект до уничтожения его владельца.

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

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Эффекты очищаются автоматически

Если эффект создан в компоненте, он автоматически уничтожается вместе с компонентом. Вам редко требуется самостоятельно вызывать .destroy().

Эффекты выполняются после отображения

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

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

Когда использовать effect, а когда computed

computed: получение значения из сигналов (чистая операция).
effect: реакция на сигналы с выполнением внешнего действия (нечистая операция).

Если Вы обнаружили, что возвращаете значение из эффекта, скорее всего, Вам нужен computed.

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

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

Итоги: эффекты

effect() выполняет функцию при каждом изменении отслеживаемых сигналов и предназначен только для побочных эффектов.

Выполняется один раз сразу, затем при каждом изменении зависимости.
Требует контекста внедрения.
Автоматически уничтожается вместе с владельцем; возвращает EffectRef для ручного управления.
Используйте computed для вычислений, а effect — для действий.

Далее: очистка ресурсов внутри эффектов.

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

Урок «Эффекты и побочные эффекты» бесплатный?

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

Чему я научусь в уроке «Эффекты и побочные эффекты»?

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

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

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

Сколько времени занимает урок «Эффекты и побочные эффекты»?

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

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

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

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

← Назад к Angular Academy