pure pipe в Angular

Dec 22, 2018

Есть такое понятие как Pure Function, определение из википедии:

1. Функция всегда вычисляет одинаковое результирующее значение для одних и тех же наборов аргументов. Результирующее значение функции не может зависеть от любой скрытой информации или состояния, которое может изменяться по мере выполнения программы, не может зависеть от любых внешних входных данных от устройств ввода/вывода.
2. Вычисление результата не должно вызывать любые семантически наблюдаемые побочные эффекты, такие как мутацию изменяемых объектов, или вывод в устройства ввода/вывода.

То есть, если в функция с параметром a всегда возвращает b, то такую функцию можно назвать чистой.

В Angular у pipe свойство pure по умолчанию имеет значение true. То есть pipe по умолчанию является чистой функцией. Это сделано с целью оптимизации Angular.

pure: false говорит, что значение для pipe может меняться динамически - срабатывает при Change Detection.

То есть если значением всегда является 345, то данный pipe выполнится всегда всего один раз: так как значение не меняется, то и перерасчет не нужен.

<div>
        {{ 345| customPipeOnReturn }}
    </div>
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'customPipeOnReturn',
    pure: true
})
export class ConvertPipe implements PipeTransform {

    constructor() {}

    transform(value:any, args?:any):any {
        // console.log будет выведен всего 1 раз, так как pure: true
        console.log('customPipeOnReturn');
        return value;
    }

}

Почему эффективно использовать pipe (youtube), если вам нужно что-то один раз посчитать, чем использовать функции: Increasing Performance - more than a pipe dream - Tanner Edwards

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

Существует практика еще с AngularJS не использовать pipe для каких-то сложных объектов.

Добавить комментарий