شیرجه عمیق به Angular ng برای افزایش عملکرد با TrackBy

چرا trackBy؟

وقتی با آرایه ای از مقادیر اولیه (مانند اعداد یا رشته ها) کار می کنید، Angular's ngFor دستورالعمل بسیار ساده کار می کند. موقعیت هر آیتم را در آرایه پیگیری می کند. بنابراین اگر آرایه تغییر کند – موارد اضافه، حذف یا به روز شوند – Angular دقیقاً می داند که کدام بخش از لیست نیاز به به روز رسانی دارد زیرا بر اساس موقعیت آنها است.

با این حال، هنگامی که از آرایه ای از اشیاء استفاده می کنید (مانند مثال دوم)، Angular به اطلاعات بیشتری برای ردیابی موثر تغییرات نیاز دارد. به طور پیش فرض، Angular اشیاء موجود در آرایه را بر اساس هویت آنها ردیابی می کند. وقتی آرایه ای از اشیاء دارید که با استفاده از الگو به یک الگو متصل شده اند *ngFor، هر تغییری در آرایه مکانیسم تشخیص تغییر Angular را برای به روز رسانی عناصر DOM مربوطه راه اندازی می کند. با این حال، Angular سعی می کند این فرآیند را با مقایسه اشیاء موجود در آرایه با مرجع بهینه کند.

وقتی یک شی را در وسط آرایه اضافه می‌کنید، الگوریتم پیش‌فرض تشخیص تغییر Angular راهی برای دانستن اینکه دقیقاً کجا تغییر رخ داده است، ندارد. به سادگی می بیند که مرجع آرایه تغییر کرده است، بنابراین فرض می کند که هر آیتم در آرایه ممکن است تغییر کرده باشد و تمام عناصر DOM مربوطه را به روز می کند.

با استفاده از a trackBy تابع، Angular می تواند به طور موثرتری تعیین کند که کدام آیتم ها اضافه، حذف یا جابجا شده اند…

Source link