Frontender Libs - обзор библиотек JS / CSS

Оптимизация рендеринга списков в Angular

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

Пример:

@Component({
  selector: 'app-optimized-list',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
    </ul>
  `,
})
export class OptimizedListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  trackByFn(index: number, item: any): number {
    return item.id; // Уникальный идентификатор
  }
}

В этом примере Angular будет использовать id как ключ, предотвращая перерисовку элементов при изменении содержимого.

👉 @sWebDev

👍5

www.tgoop.com/sWebDev/3220

1.28K viewsOct 21, 2024 at 07:43

Оптимизация рендеринга списков в Angular

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

Пример:

@Component({
  selector: 'app-optimized-list',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
    </ul>
  `,
})
export class OptimizedListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  trackByFn(index: number, item: any): number {
    return item.id; // Уникальный идентификатор
  }
}

BY Frontender Libs - обзор библиотек JS / CSS