Улучшение производительности Angular с использованием trackBy

Когда вам нужно перебрать коллекцию в Angular, вы, вероятно, будете использовать директиву ngFor, которая создает экземпляр шаблона для каждого элемента из коллекции.

<ul>
  <li *ngFor="let item of collection;">{{item.id}}</li>
</ul>

Если в какой-то момент нам нужно изменить данные в коллекции, например, в результате запроса к API, возникает проблема, потому что Angular не может отслеживать элементы в коллекции и не знает, какие элементы были удалены или добавлены.

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

Примечание: когда я говорю "изменить данные", я имею в виду замену коллекции новыми объектами и не сохранение ссылки на ту же коллекцию.

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

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
    </ul>
    <button (click)="getItems()">Refresh items</button>
  `,
})
export class App {

  constructor() {
    this.collection = [{id: 1}, {id: 2}, {id: 3}];
  }
  
  getItems() {
    this.collection = this.getItemsFromServer();
  }
  
  getItemsFromServer() {
    return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
  }
  
  trackByFn(index, item) {
    return index; // or item.id
  }
}

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

Пример доступен по ссылке

Это вольный перевод материала

#angular