Какова цель использования ngFor trackBy?

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

Проблема производительности

Если у вас есть, скажем, список из 1000 элементов и во время обновления данных меняется всего 1 элемент, Angular при использовании *ngFor без trackBy снова рендерит все 1000 элементов. Это неэффективно и может негативно сказаться на производительности.

Решение с помощью trackBy

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

Как использовать trackBy

Чтобы использовать trackBy, вам нужно определить функцию в вашем компоненте, которая будет возвращать уникальный идентификатор для каждого элемента. Вот простой пример:

Пример компонента:

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users; trackBy: trackById">
        {{ user.name }}
      </li>
    </ul>
  `
})
export class UserListComponent {
  users = [
    { id: 1, name: 'Алексей' },
    { id: 2, name: 'Мария' },
    { id: 3, name: 'Иван' }
  ];

  trackById(index: number, user: { id: number }): number {
    return user.id;
  }
}

Объяснение примера:

Заключение

Использование trackBy с *ngFor – это простой способ оптимизировать рендеринг списков в Angular. Особенно это актуально при работе с большими массивами данных, так как помогает избежать ненужных перерисовок, что в свою очередь улучшает производительность приложения. Не забудьте использовать trackBy, когда вы работаете с массивами, особенно если часто обновляете данные!