У вас включен AdBlock или иной блокировщик рекламы.

Пожалуйста, отключите его, доход от рекламы помогает развитию сайта и появлению новых статей.

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Повышаем производительность Angular 2+ приложений с помощью trackBy

Разберем, как можно оптимизировать работу с отрисовкой больших списков с данными при их изменении при помощи функции trackBy и как она работает.

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

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

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

В результате, Angular необходимо удалить все элементы DOM, связанные с данными, и создать их снова. Это означает много манипуляций с DOM, особенно в случае большой коллекции, и, как мы знаем, 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 может отслеживать, какие элементы были добавлены или удалены в соответствии с уникальным идентификатором, и создать или уничтожить только те элементы DOM, которые изменились.

#JavaScript #Angular