Угловые трубы 2: Понимание чистых и нечистых труб

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

Чистые трубы:

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

Загрязненные трубы:

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

Примеры кода:

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

1. Пример чистой трубы:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'doublePure',
  pure: true, // This is the default, but explicitly stating it for clarity
})
export class DoublePurePipe implements PipeTransform {
  transform(value: number[]): number[] {
    console.log('Pure pipe called');
    return value.map(num => num * 2);
  }
}

2. Пример загрязненной трубы:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'doubleImpure',
  pure: false,
})
export class DoubleImpurePipe implements PipeTransform {
  transform(value: number[]): number[] {
    console.log('Impure pipe called');
    return value.map(num => num * 2);
  }
}

Выход:

В приведенных выше примерах оба канала удваивают входной массив чисел. Однако есть принципиальная разница в поведении:

При использовании чистого канала метод transform будет выполняться только в случае изменения входного массива. Если бы вы использовали чистый канал в своем шаблоне следующим образом:

{{ numbers | doublePure }}

А если вы обновите массив numbers новыми данными, будет вызван чистый канал для пересчета вывода.

С другой стороны, если вы используете нечистый канал в своем шаблоне:

{{ numbers | doubleImpure }}

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

Заключение:

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

— — — — — — — — — Конец лекции — — — — — — —

Проверьте все уроки Angular Intermediate Lessons