Pipes

Как оно работает

/**
 * Invokes a pipe with 1 arguments.
 *
 * This instruction acts as a guard to {@link PipeTransform#transform} invoking
 * the pipe only when an input to the pipe changes.
 *
 * @param index Pipe index where the pipe was stored on creation.
 * @param slotOffset the offset in the reserved slot space
 * @param v1 1st argument to {@link PipeTransform#transform}.
 *
 * @codeGenApi
 */
export function ɵɵpipeBind1(index: number, slotOffset: number, v1: any): any {
  const adjustedIndex = index + HEADER_OFFSET;
  const lView = getLView();
  const pipeInstance = load<PipeTransform>(lView, adjustedIndex);
  return isPure(lView, adjustedIndex) ?
      pureFunction1Internal(
          lView, getBindingRoot(), slotOffset, pipeInstance.transform, v1, pipeInstance) :
      pipeInstance.transform(v1);
}
/**
 * If the value of the provided exp has changed, calls the pure function to return
 * an updated value. Or if the value has not changed, returns cached value.
 *
 * @param lView LView in which the function is being executed.
 * @param bindingRoot Binding root index.
 * @param slotOffset the offset from binding root to the reserved slot
 * @param pureFn Function that returns an updated value
 * @param exp Updated expression value
 * @param thisArg Optional calling context of pureFn
 * @returns Updated or cached value
 */
export function pureFunction1Internal(
    lView: LView, bindingRoot: number, slotOffset: number, pureFn: (v: any) => any, exp: any,
    thisArg?: any): any {
  const bindingIndex = bindingRoot + slotOffset;
  return bindingUpdated(lView, bindingIndex, exp) ?
      updateBinding(lView, bindingIndex + 1, thisArg ? pureFn.call(thisArg, exp) : pureFn(exp)) :
      getPureFunctionReturnValue(lView, bindingIndex + 1);
}

Почему здесь перфоманс важен

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

Примеры плохого кода

Передача объекта или массива по ссылке, которая обновляется каждый тик.

Использование стейта в pure пайпах

Подводные камни

Пайп тратит ресурсы на вычисление изменений (кстати функция байндинга та же, что и при интерполяции).

Пайп хранит вычисленные значения в LView, следовательно большое количество impure пайп создает огромные LView что ведет к сложностям при GC

У меня лично существует вопрос: вызывается ли закешированное значение при вызове pipe.transform в компоненте

Пайп хранит только предыдущее значение вычислений

Чего не хватает в базовой функциональности

Увеличить кэш аргументов пайпы