BlazorASP.NET Core virtualizace komponent

Článek
11/09/2021
4 min ke čtení

Vylepšete vnímovaný výkon vykreslování komponent pomocí integrované Blazor podpory virtualizace architektury s Virtualize komponentou. Virtualizace je technika pro omezení vykreslování uživatelského rozhraní pouze na části, které jsou aktuálně viditelné. Virtualizace je užitečná například v případě, že aplikace musí vykreslit dlouhý seznam položek a v daném okamžiku musí být viditelná pouze podmnožina položek.

Komponentu Virtualize použijte v případě, že:

Vykreslení sady datových položek ve smyčce
Většina položek není viditelná kvůli posouvání.
Vykreslené položky mají stejnou velikost.

Když se uživatel posune k libovolnému bodu v seznamu položek komponenty, komponenta vypočítá viditelné položky, které Virtualize se mají zobrazit. Neviditelné položky se nevykreslí.

Bez virtualizace může typický seznam k vykreslení každé položky v seznamu použít smyčku foreach jazyka C#. V následujícím příkladu:

allFlights je kolekce letů letadel.
Komponenta FlightSummary zobrazí podrobnosti o každém letu.
Atribut @key direktivy zachovává vztah každé komponenty ke svému vykreslení letem FlightSummary letem FlightId .

<div style="height:500px;overflow-y:scroll">
    @foreach (var flight in allFlights)
    {
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    }
</div>

Pokud kolekce obsahuje tisíce letů, vykreslení letů trvá dlouhou dobu a uživatelé zaznamenat znatelnou prodlevu uživatelského rozhraní. Většina letů není vidět, protože spadají mimo výšku <div> prvku.

Místo vykreslení celého seznamu letů najednou nahraďte smyčku v předchozím foreach příkladu Virtualize komponentou :

Jako allFlights zdroj pevné položky zadejte do Virtualize<TItem>.Items . Komponenta vykreslí pouze aktuálně viditelné Virtualize lety.
Pomocí parametru zadejte kontext pro každý Context let. V následujícím příkladu se používá jako kontext, který poskytuje přístup flight ke členům každého letu.

<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="@allFlights" Context="flight">
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    </Virtualize>
</div>

Pokud s parametrem není zadaný kontext, použijte hodnotu v šabloně obsahu položky pro přístup ke Context context členům každého letu:

<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="@allFlights">
        <FlightSummary @key="context.FlightId" Details="@context.Summary" />
    </Virtualize>
</div>

VirtualizeKomponenta:

Vypočítá počet položek k vykreslení na základě výšky kontejneru a velikosti vykreslených položek.
Přepočítá a znovu vykresluje položky při posouvání uživatele.
Načte pouze řez záznamů z externího rozhraní API, které odpovídá aktuální viditelné oblasti, namísto stahování všech dat z kolekce.

Obsah položky pro Virtualize komponentu může zahrnovat:

Prostý kód Razor HTML, jak ukazuje předchozí příklad.
Jednu nebo více Razor komponent.
Kombinace HTML/ a Razor Razor komponent.

Delegát zprostředkovatele položek

Pokud nechcete načíst všechny položky do paměti, můžete zadat metodu delegáta zprostředkovatele položek na parametr komponenty, který asynchronně načítá požadované položky Virtualize<TItem>.ItemsProvider na vyžádání. V následujícím příkladu LoadEmployees metoda poskytuje položky pro Virtualize komponentu:

<Virtualize Context="employee" ItemsProvider="@LoadEmployees">
    <p>
        @employee.FirstName @employee.LastName has the 
        job title of @employee.JobTitle.
    </p>
</Virtualize>

Poskytovatel položek obdrží , který určuje požadovaný počet ItemsProviderRequest položek od určitého počátečního indexu. Poskytovatel položek pak načte požadované položky z databáze nebo jiné služby a vrátí je jako společně s celkovým ItemsProviderResult<TItem> součtem položek. Poskytovatel položek se může rozhodnout načíst položky s každou žádostí nebo je ukládat do mezipaměti, aby byly snadno dostupné.

Komponenta může přijímat jenom jeden zdroj položek ze svých parametrů, takže se nepokoušejte současně používat poskytovatele položek Virtualize a přiřazovat kolekci k Items . Pokud jsou obě přiřazeny, InvalidOperationException je vyvolána, když jsou parametry komponenty nastaveny za běhu.

Následující příklad LoadEmployees metody načte zaměstnance z EmployeeService (není zobrazeno):

private async ValueTask<ItemsProviderResult<Employee>> LoadEmployees(
    ItemsProviderRequest request)
{
    var numEmployees = Math.Min(request.Count, totalEmployees - request.StartIndex);
    var employees = await EmployeesService.GetEmployeesAsync(request.StartIndex, 
        numEmployees, request.CancellationToken);

    return new ItemsProviderResult<Employee>(employees, totalEmployees);
}

Virtualize<TItem>.RefreshDataAsync instruuje komponentu, aby si z její aplikace znovu vyžádá ItemsProvider data. To je užitečné při změně externích dat. Při použití není nutné volat RefreshDataAsync Items .

Zástupný symbol

Vzhledem k tomu, že vyžádání položek ze vzdáleného zdroje dat může nějakou dobu trvat, máte možnost vykreslit zástupný symbol s obsahem položky:

K zobrazení obsahu použijte ( Placeholder ), dokud nebudou k dispozici data <Placeholder>...</Placeholder> položky.
Slouží Virtualize<TItem>.ItemContent k nastavení šablony položky pro seznam.

<Virtualize Context="employee" ItemsProvider="@LoadEmployees">
    <ItemContent>
        <p>
            @employee.FirstName @employee.LastName has the 
            job title of @employee.JobTitle.
        </p>
    </ItemContent>
    <Placeholder>
        <p>
            Loading&hellip;
        </p>
    </Placeholder>
</Virtualize>

Velikost položky

Výšku každé položky v pixelech můžete nastavit na Virtualize<TItem>.ItemSize (výchozí hodnota je 50). Následující příklad změní výšku každé položky z výchozích 50 pixelů na 25 pixelů:

<Virtualize Context="employee" Items="@employees" ItemSize="25">
    ...
</Virtualize>

Ve výchozím nastavení komponenta měří velikost vykreslování (výšku) jednotlivých položek Virtualize po počátečním vykreslení. Pomocí můžete předem zadat přesnou velikost položky, která vám pomůže s přesným počátečním výkonem vykreslování a zajistit správnou pozici posouvání ItemSize při opětovném načtení stránky. Pokud výchozí nastavení způsobí, že se některé položky vykreslí mimo aktuálně viditelné zobrazení, aktivuje se ItemSize druhé opětovné vykreslení. Aby se ve virtualizovaném seznamu správně zachovala pozice posouvání prohlížeče, musí být počáteční vykreslení správné. Pokud ne, uživatelé můžou zobrazit nesprávné položky.

Overscan count

Virtualize<TItem>.OverscanCount určuje, kolik dalších položek se vykreslí před a za viditelnou oblastí. Toto nastavení pomáhá snížit frekvenci vykreslování během posouvání. Vyšší hodnoty však mají za následek vykreslení dalších prvků na stránce (výchozí hodnota: 3). Následující příklad změní počet prohledů z výchozích tří položek na čtyři položky:

<Virtualize Context="employee" Items="@employees" OverscanCount="4">
    ...
</Virtualize>

Změny stavu

Při provádění změn položek vykreslených komponentou voláním vynutíte opětovné vyhodnocení a Virtualize StateHasChanged opětovné vykreslení komponenty. Další informace naleznete v tématu BlazorASP.NET Core vykreslování komponent.

Komponentu Virtualize použijte v případě, že:

Vykreslení sady datových položek ve smyčce
Většina položek není viditelná kvůli posouvání.
Vykreslené položky mají stejnou velikost.

Když se uživatel posune k libovolnému bodu v seznamu položek komponenty, komponenta vypočítá viditelné položky, které Virtualize se mají zobrazit. Neviditelné položky se nevykreslí.

Bez virtualizace může typický seznam k vykreslení každé položky v seznamu použít smyčku foreach jazyka C#. V následujícím příkladu:

allFlights je kolekce letů letadel.
Komponenta FlightSummary zobrazí podrobnosti o každém letu.
Atribut @key direktivy zachovává vztah každé komponenty ke svému vykreslení letem FlightSummary letem FlightId .

<div style="height:500px;overflow-y:scroll">
    @foreach (var flight in allFlights)
    {
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    }
</div>

Místo vykreslení celého seznamu letů najednou nahraďte smyčku v předchozím foreach příkladu Virtualize komponentou :

Jako allFlights zdroj pevné položky zadejte do Virtualize<TItem>.Items . Komponenta vykreslí pouze aktuálně viditelné Virtualize lety.
Pomocí parametru zadejte kontext pro každý Context let. V následujícím příkladu se používá jako kontext, který poskytuje přístup flight ke členům každého letu.

<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="@allFlights" Context="flight">
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    </Virtualize>
</div>

Pokud s parametrem není zadaný kontext, použijte hodnotu v šabloně obsahu položky pro přístup ke Context context členům každého letu:

<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="@allFlights">
        <FlightSummary @key="context.FlightId" Details="@context.Summary" />
    </Virtualize>
</div>

VirtualizeKomponenta:

Vypočítá počet položek k vykreslení na základě výšky kontejneru a velikosti vykreslených položek.
Přepočítá a znovu vykresluje položky při posouvání uživatele.
Načte pouze řez záznamů z externího rozhraní API, které odpovídá aktuální viditelné oblasti, namísto stahování všech dat z kolekce.

Obsah položky pro Virtualize komponentu může zahrnovat:

Prostý kód Razor HTML, jak ukazuje předchozí příklad.
Jednu nebo více Razor komponent.
Kombinace HTML/ a Razor Razor komponent.

Delegát zprostředkovatele položek

<Virtualize Context="employee" ItemsProvider="@LoadEmployees">
    <p>
        @employee.FirstName @employee.LastName has the 
        job title of @employee.JobTitle.
    </p>
</Virtualize>

VirtualizeKomponenta může přijmout pouze jeden zdroj položky z jeho parametrů, takže nepokusí se současně použít poskytovatele položek a přiřadit kolekci do Items . Pokud jsou obě přiřazeny, InvalidOperationException vyvolá se při nastavení parametrů komponenty za běhu.

Následující LoadEmployees Příklad metody načte zaměstnance z EmployeeService (nezobrazený):

private async ValueTask<ItemsProviderResult<Employee>> LoadEmployees(
    ItemsProviderRequest request)
{
    var numEmployees = Math.Min(request.Count, totalEmployees - request.StartIndex);
    var employees = await EmployeesService.GetEmployeesAsync(request.StartIndex, 
        numEmployees, request.CancellationToken);

    return new ItemsProviderResult<Employee>(employees, totalEmployees);
}

Virtualize<TItem>.RefreshDataAsync instruuje komponentu, aby data znovu požadovala ItemsProvider . To je užitečné, když se změní externí data. Při použití není nutné volat RefreshDataAsync Items .

Zástupný symbol

Vzhledem k tomu, že požadavek na položky ze vzdáleného zdroje dat může nějakou dobu trvat, máte možnost vykreslit zástupný text s obsahem položky:

Použijte Placeholder ( <Placeholder>...</Placeholder> ) k zobrazení obsahu, dokud nejsou data položky k dispozici.
Použijte Virtualize<TItem>.ItemContent k nastavení šablony položky pro seznam.

<Virtualize Context="employee" ItemsProvider="@LoadEmployees">
    <ItemContent>
        <p>
            @employee.FirstName @employee.LastName has the 
            job title of @employee.JobTitle.
        </p>
    </ItemContent>
    <Placeholder>
        <p>
            Loading&hellip;
        </p>
    </Placeholder>
</Virtualize>

Velikost položky

Výšku každé položky v pixelech lze nastavit s hodnotou Virtualize<TItem>.ItemSize (výchozí: 50). Následující příklad změní výšku každé položky z výchozí hodnoty 50 pixelů na 25 pixelů:

<Virtualize Context="employee" Items="@employees" ItemSize="25">
    ...
</Virtualize>

Ve výchozím nastavení Virtualize Komponenta měří velikost vykreslování (výška) jednotlivých položek po počátečním vykreslení. Použijte ItemSize k poskytnutí přesné velikosti položky předem, která vám pomůže s přesným počátečním výkonem vykreslování a zajištěním správné pozice posunutí pro opětovné načtení stránky. Pokud výchozí nastavení ItemSize způsobí, že některé položky se vykreslí mimo aktuálně viditelné zobrazení, spustí se druhé opakované vykreslování. Chcete-li správně zachovat pozici posouvání prohlížeče v virtualizovaném seznamu, počáteční vykreslení musí být správné. V takovém případě mohou uživatelé zobrazit nesprávné položky.

Počet překontrol

Virtualize<TItem>.OverscanCount Určuje, kolik dalších položek je vykresleno před a po viditelné oblasti. Toto nastavení pomáhá snižovat četnost vykreslování během posouvání. Výsledkem ale vyšších hodnot je více prvků vykreslených na stránce (výchozí: 3). Následující příklad změní počet přeskenování z výchozích na tři položky na čtyři položky:

<Virtualize Context="employee" Items="@employees" OverscanCount="4">
    ...
</Virtualize>

Změny stavu

Při provádění změn v položkách vygenerovaných Virtualize komponentou zavolejte StateHasChanged k vynucení opakovaného vyhodnocení a opětovného vykreslování komponenty. Další informace naleznete v tématu BlazorASP.NET Core vykreslování komponent.

BlazorASP.NET Core virtualizace komponent

Ohodnoťte vaše zkušenosti

Delegát zprostředkovatele položek

Zástupný symbol

Velikost položky

Overscan count

Změny stavu

Delegát zprostředkovatele položek

Zástupný symbol

Velikost položky

Počet překontrol

Změny stavu