DevGang
Авторизоваться

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

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

  • {{item.id}}

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

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

Когда я говорю «изменить данные», я имею в виду заменить коллекцию новыми объектами и не сохранять ту же ссылку.

Давайте посмотрим на это в действии:

Решение:

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

@Component({
 selector: 'my-app',
 template: `
   
  • {{item.id}}
`, }) 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
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться