پرفورمنس بهتر با @Key!

پروژه Blazor ای را در نظر بگیرید که در آن لیستی از عناصر را در صفحه نمایش می‌دهیم. وقتی یکی از عناصر را ادیت یا عضو دیگری به لیست اضافه می‌کنیم، Blazor باید تصمیم بگیرد که کدام یک از عناصر قبلی حفظ می‌شوند و چگونه آبجکت مدل باید به آنها مپ شوند. به طور معمول، این فرآیند به صورت خودکار و برای رندر کلی کافی است، اما اغلب مواردی وجود دارد که کنترل فرآیند با استفاده از ویژگی دستوری @key مورد نیاز است.

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

برای مثال در کد زیر هر بار که عضو جدیدی به اول لیست اضافه شود تمامی لیست مجدد رندر می‌شود‌.

@foreach (var item in items){

<li>@item</li>

}

دستور @key به Blazor اجازه می دهد تا از یک کلید خاص برای مقایسه عناصر به جای ایندکس استفاده کند Blazor آیتم های موجود را با موارد جدید با استفاده از مقدار کلید مقایسه می کند. به این ترتیب اضافه‌ها/اصلاحات/حذف‌ها را بهتر تشخیص می‌دهد.

@foreach (var item in items)

{

<li @key="item.Id">@item</li>

}

با استفاده از @key اگر یک نمونه از مجموعه حذف شود، فقط همان نمونه از رابط کاربری حذف می شود. موارد دیگر بدون تغییر باقی می‌ماند.

اگر ورودی‌های مجموعه دوباره مرتب شوند، نمونه‌های مربوطه در رابط کاربری حفظ و مرتب می‌شوند.

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

به طور معمول، استفاده از @key درون یک لیست وقتی مقدار مناسب برای تعریف @key وجود دارد، منطقی است. (به عنوان مثال در یک بلاک foreach)

هنگام رندر کردن با @key هزینه عملکردی وجود دارد. هزینه عملکرد زیاد نیست، اما فقط در صورتی @key را مشخص کنید که حفظ عنصر یا جزء به نفع برنامه باشد.

برای مطالعه بیشتر می‌توانید لینک های زیر را ببینید:

https://www.meziantou.net/optimizing-blazor-performance-using-the-key-directive.htm

https://blazor-university.com/components/render-trees/optimising-using-key/