Должны ли мы использовать каналы вместо рендеринга тернарных условий в шаблонах Angular?

Question

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

Я заметил, что если у меня есть функция в моем шаблоне для проверки и возврата чего-либо в мой шаблон, это неправильно, потому что когда у меня есть некоторые изменения состояния, эта функция звонил снова каждый раз, когда я что-то делаю. Например,

<div *ngFor="let user of users">
   <h3>{{ getUserRole(user.id) }}</h3>
</div>

И в моем TS:

getUserRole(id: number) {
   if (id === 0) {
      return 'Teacher'
   } else if (id === 1) {
      return 'Study'
   }
}

Каждый раз, когда я выполняю действие на моей странице, эта функция будет вызываться. Один из способов избежать этого - использовать «чистые каналы».

Мне интересно, происходит ли это также при использовании тернарного условия в моем шаблоне. Например,

<div *ngFor="let user of users">
   <h3>{{ user.id === 0 ? 'Teacher' : 'Study' }}</h3>
</div>

Если это тоже происходит, когда мне нужно использовать трубы? Во всех случаях, когда мне нужно визуализировать что-то с условным выражением, как в примерах, или только если мое условие слишком тяжелое (массив с множеством объектов и свойств)?

Answer 1

PIPES (чистый) лучше, чем встроенный тернарный оператор или вызов функции, UMMM !!

Почему: -

Потому что каналы более оптимизированы, чем данные два. С Pipes, angular будет отображаться в более быстром темпе.

Причина: -

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

Элементарный пример: - У нас есть функция square () , которая принимает одно значение и дает возведенное в квадрат значение функции ввода

: -

add(val): number{
return val*val;
}

И это наш список входов 3, 5, 6, 6, 6, 5, 4, 3, 4, 5. (всего 10 раз)

Но angular вызовет внутренний код функции для 3, 5, 6, 4. (вызывается только 4 раза).

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

REAL world Case для вашего примера user.id === 0? 'Teacher': 'Study'

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

ПРИМЕЧАНИЕ: - Приведенная выше информация применима только к чистым трубам, а не нечистым .

Answer 2

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

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

   Когда вы хотите отфильтровать массив или объекты. Всегда предпочтительнее использовать чистую трубу .

3. Тройной тоже подойдет ИМХО, если уравнение не слишком сложное .

4. Самое важное

• всякий раз, когда вы используете * ngFor in всегда думайте об использовании trackBy функции ngFor , если вы собираетесь часто обновлять список .
  
• Обычно без trackBy , если вы обновляете * ngFor list, он будет повторно отображать для него всю DOM. Это нехорошо, когда вы имеете дело с большим набором данных. Это повлияет на производительность.
  
• Использование trackBy , angular будет отслеживать все элементы и визуализировать / повторно отображать только обновленный элемент. Это улучшает производительность.