0Pricing
Angular Academy · Урок

Чистые и нечистые конвейеры

Разберитесь в поведении обнаружения изменений в конвейерах.

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

Чистые каналы по умолчанию

Каждый канал по умолчанию является чистым. Чистый канал выполняется повторно только при изменении его входного значения или аргументов по ссылке.

Почему чистые каналы работают быстро

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

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

Изменения ссылки и значения

Чистые каналы обнаруживают изменения ссылки. Изменение массива на месте не запускает чистый канал, поскольку ссылка на массив остаётся прежней.

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

Объявление нечистого канала

Установите pure: false в декораторе @Pipe, чтобы сделать канал нечистым. Нечистый канал выполняется при каждом цикле обнаружения изменений.

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

Когда использовать нечистые каналы

Используйте нечистые каналы, если преобразование зависит от изменяемых данных — например, при фильтрации массива, который изменяется на месте, или значений, меняющихся без создания новой ссылки.

Цена нечистых каналов

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

Канал async является нечистым

Встроенный канал async является нечистым. Он подписывается на наблюдаемый объект или обещание и обновляет представление по мере поступления новых значений.

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

Канал async автоматически отменяет подписку

Важное преимущество канала async — автоматическая отмена подписки при уничтожении компонента, что предотвращает утечки памяти.

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

Избегайте изменения данных при использовании чистых каналов

Чтобы чистые каналы корректно работали с коллекциями, обращайтесь с данными как с неизменяемыми: создавайте новые массивы и объекты вместо изменения существующих.

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

Выбор между чистым и нечистым каналом

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

Рекомендации по нечистым каналам

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

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

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

Проверьте, насколько хорошо Вы понимаете чистые и нечистые каналы.

Итоги

Чистые каналы выполняются только при изменении ссылок и работают быстро; нечистые каналы (pure: false) выполняются в каждом цикле и подходят для изменяемых данных. Канал async является нечистым и автоматически отменяет подписку.

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

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

Урок «Чистые и нечистые конвейеры» бесплатный?

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

Чему я научусь в уроке «Чистые и нечистые конвейеры»?

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

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

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

Сколько времени занимает урок «Чистые и нечистые конвейеры»?

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

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

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

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

  1. Использование встроенных конвейеров
  2. Объединение конвейеров и передача параметров
  3. Создание пользовательских конвейеров
  4. Чистые и нечистые конвейеры
← Назад к Angular Academy