بهبود عملکرد رندر در Blazor بوسیله قابلیت component virtualization - قسمت 1

توجه : این مطلب برداشتی از نوشته ی Dave Brock می باشد

برای نمایش دیتاست های حجیم در ورژن دات نت 5 Blazor ، قابلیت جدیدی افزوده شده که با هم بررسی خواهیم کرد.

در کنار اینکه آمار مربوط به عملکرد و سرعت برنامه در Load صفحه، موضوع مهمی است اما آنچه که کاربر می بیند و حس می کند در نهایت مطلبی است که باید در نظر بگیریم. فرض کنید می توان آنچه اکنون نیاز است را رندر کرد و آنچه را بعدا نیاز است، همان موقع نیاز. اما کاربر نباید بابت چیزی بیش اندازه منتظر بماند.

کامپوننت virtualization تکنیکی است که رندر شدن صفحه را محدود به همان بخشی می کند که قابل دیدن است. فرض کنید که قرار است که یک Table با 1000 ردیف اطلاعاتی را به کاربر نمایش دهید.

قطعا همه ی 1000 ردیف را یکجا در دسترس او قرار نمی دهید (به انتهای صفحه نمی رسد!) و با تکنیک هایی مانند Pagination به او قابلیت مدیریت نمایش تعداد اطلاعات را به او می دهید تا در صفحه گم نشود و مابقی اطلاعات را نامرئی می کنید. بدین منظور کامپوننت از پیش ساخته شده Virtualize در دسترس است

فرض کنید که میخواهیم یک لیست از جنس کلاس (یا record) Person که شامل Property های FirstName و LastName را در فایل .razorکامپوننت مدنظر نمایش دهیم. کاری که باید قبلا می کردیم کد زیر بود :

@foreach (var person in people)
{
    <p>
        @person.FirstName @person.LastName isonly fun on Fridays.
    </p>
}

با کامپوننت Virtualize، لیست مورد نظر را به Items پاس می دهیم و با استفاده از context به اطلاعات آبجکت دسترسی داریم

<Virtualize Items=&quot@people&quot>
    <p>
        @context.FirstName @context.LastName is only fun on Fridays.
    </p>
</Virtualize>

به علاوه اگر بخواهیم context را در برنامه خود صریحا تعریف کنیم می توانیم از کد زیر استفاده کنیم

<Virtualize Context=&quotperson&quot Items=&quot@people&quot>
    <p>
        @person.FirstName @person.LastName is only fun on Fridays.
    </p>
</Virtualize>

کامپوننت Virtualizeتلاش می کند تا بفهمد که ارتفاع container ای که در آن عمل می کند و ارتفاع هر آیتم را که میخواهد رندر می شود چقدر است. منظور از " container" می تواند یک یا چند کامپوننت Razor، ترکیبی از HTML و کامپوننت های Razor یا یک کد Razorساده باشد.

تا اینجا ساده ترین نوع استفاده را دیدیم. این کامپوننت می تواند موارد استفاده ی پیشرفته تر و وسیع تری داشته باشد.

بزودی در این باره بیشتر خواهم گفت