خیلی وقت ها هست که شما در وب اپلیکیشن های Angular خودتون نیاز دارید که روی یک Collection پیمایش انجام بدید و برای نمایش اعضای اون احتمالاً از دستور ngFor استفاده می کنید که یک الگو را یک بار در هر مورد از مجموعه ایجاد می کند. مثلا:
<ul> <li *ngFor="let item of collection;">{{item.name}}</li> </ul>
حالا اگر زمانی پیش بیاد که ما نیاز به تغییر داده های این مجموعه داشته باشیم، به عنوان مثال در نتیجه درخواست یک API، یا تعاملی که کاربر با برنامه خواهد داشت و به طور مثال موردی را حذف کند یا چیزی را اضافه کند، ما با یک مشکل روبرو هستیم! چون Angular نمی تواند موارد موجود در مجموعه را ردیابی کند و هیچ اطلاعی از اینکه کدام موارد حذف یا اضافه شده اند را ندارد.
در نتیجه، Angular باید تمام عناصر DOM مربوط به داده ها را حذف کرده و دوباره آن ها را ایجاد کند. این یعنی در بسیاری از دستکاری های DOM خصوصاً در مورد مجموعه بزرگی از دادهها، این دستکاری های DOM میتواند خیلی هزینه بر و گران باشد و در حقیقت عملکرد و کارایی برنامه شما را کاهش دهد.
نکته: وقتی صحبت از “تغییر داده ها” می کنیم، منظور این است که در Collection اعضای جدیدی را جایگزین کنیم و یعنی دیگه همان Reference قبلی را حفظ نمی کنیم.
ما می تونیم با ارائه یک تابع trackBy به Angular کمک کنیم تا مواردی را که اضافه یا حذف می شوند را پیگیری کند. تابع trackBy در واقع index و item فعلی را به عنوان آرگومان ورودی می گیرد و باید یک شناسه منحصر به فرد را برای این item برگرداند. برای اینکه بهتر کاربردش را بفهمیم یک مثال با هم ببینیم:
حالا با این روش وقتی که مجموعه داده شما تغییر کند، Angular میتواند با توجه به شناسه منحصر به فرد، ردیابی کند که کدام موارد اضافه یا حذف شده و فقط موارد تغییر یافته را ایجاد یا حذف کند. بنابراین دیگر همه DOM شما برای همه موارد دوباره ایجاد نخواهد شد که این خود تاثیر به سزایی در بهبود Performance اپلیکیشن شما خواهد داشت.
به همین سادگی!
