> Какие типы пайпов бывают в Angular и в чем разница между pure и impure пайпами? (Angular)

Короткий ответ

В Angular есть два типа пайпов: pure и impure. Pure pipe пересчитывается только при изменении примитивного значения или ссылки на объект, что даёт высокую производительность. Impure pipe запускается при каждом цикле change detection, независимо от изменения входных данных. По умолчанию все встроенные пайпы pure, impure создаются явно через pure: false в декораторе @Pipe.

Подробное объяснение

Pure pipe - это пайп, который Angular вызывает только когда обнаруживает изменение входного значения (примитив меняется по значению, объект - по ссылке). Это стандартное поведение, которое даёт оптимальную производительность, так как пайп не пересчитывается на каждом цикле change detection. Pure pipe должен быть детерминированным: при одинаковых входных данных всегда возвращать одинаковый результат.

Impure pipe вызывается каждый раз, когда Angular запускает change detection, независимо от того, изменились ли входные данные. Это может быть полезно, когда пайп зависит от внешнего состояния (например, текущего времени) или когда нужно отслеживать изменения внутри объекта без смены ссылки (например, добавление элемента в массив). Однако impure пайпы могут серьёзно снизить производительность, если внутри них выполняются тяжёлые вычисления.

Angular по умолчанию делает все пайпы pure. Чтобы сделать пайп impure, нужно в декораторе @Pipe указать pure: false.

На практике

Pure пайпы стоит использовать в подавляющем большинстве случаев - они эффективны и предсказуемы. Impure пайпы применяются редко, обычно когда:

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

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

Пример кода

TYPESCRIPT
// Pure pipe (по умолчанию)
@Pipe({ name: 'multiply' })
export class MultiplyPipe implements PipeTransform {
  transform(value: number, factor: number): number {
    console.log('Pure pipe called');
    return value * factor;
  }
}

// Impure pipe
@Pipe({ 
  name: 'currentTime',
  pure: false 
})
export class CurrentTimePipe implements PipeTransform {
  transform(value: unknown): string {
    return new Date().toLocaleTimeString();
  }
}

Как отвечать на собеседовании

Начни с чёткого определения pure и impure пайпов, затем объясни разницу в механизме вызова. Упомяни, что pure пайпы - это стандарт, а impure - исключение для специфических сценариев. Приведи примеры, когда каждый из них уместен. Подчеркни важность производительности и детерминированности pure пайпов. Если спросят про встроенные пайпы - скажи, что все они pure, кроме async (который тоже pure, но работает с Observable). Будь готов обсудить альтернативы impure пайпам: использование методов компонента, вычисляемых свойств или подписки на изменения.

Что проверяет интервьюер

Интервьюер оценивает понимание механизма change detection в Angular и умение выбирать правильный инструмент для задачи. Важно показать знание trade-off между производительностью и функциональностью. Также проверяется способность объяснить, почему pure пайпы предпочтительнее, и в каких редких случаях impure пайпы оправданы.

Типичные ошибки

• Создание impure пайпа без необходимости, что ведёт к падению производительности
• Использование impure пайпа для фильтрации или сортировки больших массивов - лучше делать это в компоненте
• Предположение, что pure pipe автоматически отслеживает изменения внутри объекта - он сравнивает только ссылки
• Забывание, что impure pipe вызывается на каждом цикле change detection, включая события мыши, таймеры и т.д.
• Использование impure pipe для асинхронных операций - для этого есть async pipe