В чем разница между чистыми и нечистыми пайпами?

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

Чистые пайпы (Pure Pipes)

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

Пример чистого пайпа:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'purePipe',
    pure: true // По умолчанию
})
export class PurePipe implements PipeTransform {
    transform(value: string): string {
        return value.toUpperCase();
    }
}

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

Использование чистого пайпа в шаблоне:

<p>{{ 'hello' | purePipe }}</p>

Нечистые пайпы (Impure Pipes)

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

Пример нечистого пайпа:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'impurePipe',
    pure: false // Нечистый пайп
})
export class ImpurePipe implements PipeTransform {
    transform(value: any): any {
        // Пример логики, которая может изменяться
        return new Date();
    }
}

В этом случае ImpurePipe возвращает текущее время, и каждый раз, когда Angular выполняет обнаружение изменений ( например, после события пользователя), этот пайп будет пересчитываться.

Использование нечистого пайпа в шаблоне:

<p>Текущее время: {{ '' | impurePipe }}</p>

Когда использовать

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

Заключение

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