TrackBy (TrackBy)

با «TrackBy در انگولار» می توانی فهرست ها را سریع نگه داری. TrackBy روشی برای شناسنامه دار کردن آیتم ها است تا DOM بی خودی عوض نشود.

TrackBy چیست؟

«TrackBy» به *ngFor می گوید هر آیتم را چگونه تشخیص دهد. معمولاً یک شناسه یکتا برمی گردانی تا نودهای DOM دوباره استفاده شوند.

چه زمانی از TrackBy استفاده کنیم؟

• وقتی فهرست جابه جا یا به روزرسانی می شود.
• برای دوری از رندر تکراری و سنگین.
• وقتی هر آیتم شناسه پایدار دارد.

نمونه کامل (با TrackBy در انگولار)

اینجا با برعکس کردن آرایه، پایداری DOM را می بینی.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

type Item = { id: number; name: string };

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button (click)=\"shuffle()\">Shuffle</button>
    <ul>
      <li *ngFor=\"let it of items; trackBy: trackById\">{{ it.id }} - {{ it.name }}</li>
    </ul>
  `
})
export class App {
  items: Item[] = [
    { id: 1, name: 'Alpha' },
    { id: 2, name: 'Beta' },
    { id: 3, name: 'Gamma' }
  ];
  shuffle(): void {
    this.items = [...this.items].reverse();
  }
  trackById(_i: number, it: Item): number {
    return it.id;
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

گام های عملی سریع

1. برای هر آیتم یک شناسه پایدار انتخاب کن.
2. تابع trackById(index, item) را پیاده سازی کن.
3. trackBy: trackById را به *ngFor اضافه کن.

نکات مهم TrackBy

نکته: اگر شناسه پایدار نباشد، سودی ندارد. همیشه کلید یکتا بده.

پیوندهای مرتبط

ببین: بایندینگ ویژگی · پایپ ها · TrackBy

جمع بندی سریع

• TrackBy از رندر اضافه جلوگیری می کند.
• کلید پایدار بده؛ معمولاً id.
• DOM جابه جا می شود، نابود نمی شود.
• لیست های بزرگ را سریع تر می کند.