BlazorASP.NET Core bileşen sanallaştırma

  • Makale
  • Okumak için 3 dakika

bileşeniyle çerçevenin yerleşik sanallaştırma desteğini kullanarak bileşen Blazor işlemenin algılanan performansını Virtualize geliştirin. Sanallaştırma, kullanıcı arabirimi işlemeyi yalnızca o anda görünür olan parçalarla sınırlamaya bir tekniktir. Örneğin, sanallaştırma, uygulamanın uzun bir öğe listesini işlemesi gerektiğinde ve herhangi bir zamanda yalnızca bir öğe alt kümesinin görünür olması gerektiğinde yararlıdır.

Aşağıdakiler Virtualize olduğunda bileşeni kullanın:

  • Bir döngüdeki veri öğeleri kümesi işleme.
  • Kaydırma nedeniyle öğelerin çoğu görünür değildir.
  • İşlenen öğeler aynı boyuttadır.

Kullanıcı bileşenin öğe listesinde rastgele bir noktaya Virtualize kaydırsa, bileşen görünür öğeleri gösterecek şekilde hesaplar. Unseen items işlenecek değil.

Sanallaştırma olmadan, tipik bir liste bir listede her öğeyi işlemek için bir C# foreach döngüsü kullanabilir. Aşağıdaki örnekte:

  • allFlights uçak uçuşlarının koleksiyonudur.
  • Bileşen FlightSummary her uçuşla ilgili ayrıntıları görüntüler.
  • @key yönerge özniteliği, her bileşenin uçuş FlightSummary tarafından işlenen uçuşla olan ilişkisini FlightId korur.
<div style="height:500px;overflow-y:scroll">
    @foreach (var flight in allFlights)
    {
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    }
</div>

Koleksiyon binlerce uçuş içeriyorsa, uçuşların işlemesi uzun sürer ve kullanıcılar fark edilebilir bir kullanıcı arabirimi gecikmesi ile karşı karşılıyordur. Uçuşların çoğu öğenin yüksekliğinin dışında olduğundan <div> görülmez.

Uçuş listesinin tamamını aynı anda işlemeye devam etmek yerine önceki foreach örnekteki döngüyü şu bileşenle Virtualize değiştirin:

  • için allFlights sabit öğe kaynağı olarak Virtualize<TItem>.Items belirtin. Yalnızca o anda görünür olan uçuşlar bileşen tarafından Virtualize işlenir.
  • parametresiyle her uçuş için bir bağlam Context belirtin. Aşağıdaki örnekte, flight her uçuşun üyelerine erişim sağlayan bağlam olarak kullanılmıştır.
<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="@allFlights" Context="flight">
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    </Virtualize>
</div>

parametresiyle bir bağlam belirtilmezse, her uçuşun üyelerine erişmek için öğe Context context içerik şablonunda değerini kullanın:

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

VirtualizeBileşen:

  • İşlenecek öğe sayısını, kapsayıcının yüksekliğine ve işlenen öğelerin boyutuna göre hesaplar.
  • Kullanıcı kaydırarak öğeleri yeniden hesaplar ve yeniden inceler.
  • Koleksiyondan tüm verileri indirmek yerine yalnızca geçerli görünür bölgeye karşılık gelen bir dış API'den kayıt dilimini getirir.

Bileşenin öğe Virtualize içeriği şunları içerebilir:

  • Önceki örnekte de olduğu gibi düz HTML Razor ve kod.
  • Bir veya daha fazla Razor bileşen.
  • HTML/ ve Razor bileşenlerin Razor karışımı.

Öğe sağlayıcısı temsilcisi

Tüm öğeleri belleğe yüklemek istemiyorsanız, istenen öğeleri isteğe bağlı olarak zaman uyumsuz olarak alan bileşenin parametresine bir öğe sağlayıcısı temsilci Virtualize<TItem>.ItemsProvider yöntemi belirtebilirsiniz. Aşağıdaki örnekte yöntemi LoadEmployees bileşene öğeleri Virtualize sağlar:

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

Öğe sağlayıcısı, belirli ItemsProviderRequest bir başlangıç dizininde başlayan gerekli öğe sayısını belirten bir alır. Ardından öğe sağlayıcısı istenen öğeleri bir veritabanından veya başka bir hizmetten alır ve toplam öğe ItemsProviderResult<TItem> sayısıyla birlikte döndürür. Öğe sağlayıcısı, her istekle birlikte öğeleri alabilir veya hazır olmak için önbelleğe alabilir.

Bir bileşen, parametrelerinden yalnızca bir öğe kaynağını kabul eder, bu nedenle aynı anda bir öğe sağlayıcısı kullanmayı ve 'ye Virtualize bir koleksiyon atamayın. Items Her ikisi de atanırsa, InvalidOperationException bileşenin parametreleri çalışma zamanında ayarlanırken bir atlar.

Aşağıdaki yöntem LoadEmployees örneği, bir örneğinden çalışanları yükler EmployeeService (gösterilmez):

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 bileşeninden verileri yeniden sorgulamasını ItemsProvider sağlar. Bu, dış veriler değişirken yararlıdır. kullanırken çağrısına gerek RefreshDataAsync Items yoktur.

Yer tutucu

Uzak bir veri kaynağından öğe isteği biraz zaman alsa da, bir yer tutucuyu öğe içeriğiyle işleme seçeneğiniz vardır:

  • Öğe verileri kullanılabilir olana kadar içerik görüntülemek için ( Placeholder <Placeholder>...</Placeholder> ) kullanın.
  • Listenin Virtualize<TItem>.ItemContent öğe şablonunu ayarlamak için kullanın.
<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>

Öğe boyutu

Piksel cinsinden her öğenin yüksekliği ile ayarlanabilir Virtualize<TItem>.ItemSize (varsayılan: 50). Aşağıdaki örnek, her bir öğenin yüksekliğini varsayılan 50 pikselden 25 piksele değiştirir:

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

Varsayılan olarak, bileşen ilk işleme sonrasında tek tek öğelerin işleme boyutunu Virtualize (yükseklik) ölçür. doğru ilk işleme performansına yardımcı olmak ve sayfa yeniden yüklemeleri için doğru kaydırma konumunu sağlamak üzere önceden tam bir öğe ItemSize boyutu sağlamak için kullanın. Varsayılan ayar bazı öğelerin o anda görünür görünümün dışında ItemSize işlemeye neden oluyorsa ikinci bir yeniden işleme tetiklenir. Sanallaştırılmış bir listede tarayıcının kaydırma konumunu doğru şekilde korumak için ilk işlemenin doğru olması gerekir. Görüntülene ise kullanıcılar yanlış öğeleri sın sın dı.

Fazlacan sayısı

Virtualize<TItem>.OverscanCount , görünür bölgeden önce ve sonra kaç ek öğe işleneceklerini belirler. Bu ayar kaydırma sırasında işleme sıklığını azaltmaya yardımcı olur. Ancak, daha yüksek değerler sayfada işlenen daha fazla öğeyle sonuç verir (varsayılan: 3). Aşağıdaki örnek, varsayılan üç öğeden fazlacan sayısını dört öğeye değiştirir:

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

Durum değişiklikleri

Bileşen tarafından işlenen öğelerde değişiklik yaparken, bileşenin yeniden değerlendirilmesini ve yeniden değerlendirilmesini zorlamak Virtualize StateHasChanged için çağrısı yapın. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.

bileşeniyle çerçevenin yerleşik sanallaştırma desteğini kullanarak bileşen Blazor işlemenin algılanan performansını Virtualize geliştirin. Sanallaştırma, kullanıcı arabirimi işlemeyi yalnızca o anda görünür olan parçalarla sınırlamaya bir tekniktir. Örneğin, sanallaştırma, uygulamanın uzun bir öğe listesini işlemesi gerektiğinde ve herhangi bir zamanda yalnızca bir öğe alt kümesinin görünür olması gerektiğinde yararlıdır.

Aşağıdakiler Virtualize olduğunda bileşeni kullanın:

  • Bir döngüdeki veri öğeleri kümesi işleme.
  • Kaydırma nedeniyle öğelerin çoğu görünür değildir.
  • İşlenen öğeler aynı boyuttadır.

Kullanıcı bileşenin öğe listesinde rastgele bir noktaya Virtualize kaydırsa, bileşen görünür öğeleri gösterecek şekilde hesaplar. Unseen items işlenecek değil.

Sanallaştırma olmadan, tipik bir liste bir listede her öğeyi işlemek için bir C# foreach döngüsü kullanabilir. Aşağıdaki örnekte:

  • allFlights uçak uçuşlarının koleksiyonudur.
  • Bileşen FlightSummary her uçuşla ilgili ayrıntıları görüntüler.
  • @key yönerge özniteliği, her bileşenin uçuş FlightSummary tarafından işlenen uçuşla olan ilişkisini FlightId korur.
<div style="height:500px;overflow-y:scroll">
    @foreach (var flight in allFlights)
    {
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    }
</div>

Koleksiyon binlerce uçuş içeriyorsa, uçuşların işlemesi uzun sürer ve kullanıcılar fark edilebilir bir kullanıcı arabirimi gecikmesi ile karşı karşılıyordur. Uçuşların çoğu öğenin yüksekliğinin dışında olduğundan <div> görülmez.

Uçuş listesinin tamamını aynı anda işlemeye devam etmek yerine önceki foreach örnekteki döngüyü şu bileşenle Virtualize değiştirin:

  • için allFlights sabit öğe kaynağı olarak Virtualize<TItem>.Items belirtin. Yalnızca o anda görünür olan uçuşlar bileşen tarafından Virtualize işlenir.
  • parametresiyle her uçuş için bir bağlam Context belirtin. Aşağıdaki örnekte, flight her uçuşun üyelerine erişim sağlayan bağlam olarak kullanılmıştır.
<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="@allFlights" Context="flight">
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    </Virtualize>
</div>

parametresiyle bir bağlam belirtilmezse, her uçuşun üyelerine erişmek için öğe Context context içerik şablonunda değerini kullanın:

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

VirtualizeBileşen:

  • İşlenecek öğe sayısını, kapsayıcının yüksekliğine ve işlenen öğelerin boyutuna göre hesaplar.
  • Kullanıcı kaydırarak öğeleri yeniden hesaplar ve yeniden inceler.
  • Koleksiyondan tüm verileri indirmek yerine yalnızca geçerli görünür bölgeye karşılık gelen bir dış API'den kayıt dilimini getirir.

Bileşenin öğe Virtualize içeriği şunları içerebilir:

  • Önceki örnekte de olduğu gibi düz HTML Razor ve kod.
  • Bir veya daha fazla Razor bileşen.
  • HTML/ ve Razor bileşenlerin Razor karışımı.

Öğe sağlayıcısı temsilcisi

Tüm öğeleri belleğe yüklemek istemiyorsanız, istenen öğeleri isteğe bağlı olarak zaman uyumsuz olarak alan bileşenin parametresine bir öğe sağlayıcısı temsilci Virtualize<TItem>.ItemsProvider yöntemi belirtebilirsiniz. Aşağıdaki örnekte yöntemi LoadEmployees bileşene öğeleri Virtualize sağlar:

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

Öğe sağlayıcısı, belirli ItemsProviderRequest bir başlangıç dizininde başlayan gerekli öğe sayısını belirten bir alır. Ardından öğe sağlayıcısı istenen öğeleri bir veritabanından veya başka bir hizmetten alır ve toplam öğe ItemsProviderResult<TItem> sayısıyla birlikte döndürür. Öğe sağlayıcısı, her istekle birlikte öğeleri alabilir veya hazır olmak için önbelleğe alabilir.

Bir bileşen, parametrelerinden yalnızca bir öğe kaynağını kabul eder, bu nedenle aynı anda bir öğe sağlayıcısı kullanmayı ve Virtualize koleksiyonuna atamayın. Items Her ikisi de atanırsa, bileşenin parametreleri çalışma zamanında InvalidOperationException ayarlanırken bir atlar.

Aşağıdaki yöntem LoadEmployees örneği bir 'den çalışanları yükler EmployeeService (gösterilmez):

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 bileşeninden verileri yeniden sorgulamasını ItemsProvider sağlar. Bu, dış veriler değişirken yararlıdır. kullanırken çağrısına gerek RefreshDataAsync Items yoktur.

Yer tutucu

Uzak bir veri kaynağından öğe isteği biraz zaman alsa da, bir yer tutucuyu öğe içeriğiyle işleme seçeneğiniz vardır:

  • Öğe verileri kullanılabilir olana kadar içerik görüntülemek için ( Placeholder <Placeholder>...</Placeholder> ) kullanın.
  • Listenin Virtualize<TItem>.ItemContent öğe şablonunu ayarlamak için kullanın.
<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>

Öğe boyutu

Piksel cinsinden her öğenin yüksekliği ile ayarlanabilir Virtualize<TItem>.ItemSize (varsayılan: 50). Aşağıdaki örnek, her bir öğenin yüksekliğini varsayılan 50 pikselden 25 piksele değiştirir:

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

Varsayılan olarak, bileşen ilk işleme sonrasında tek tek öğelerin işleme boyutunu Virtualize (yükseklik) ölçür. doğru ilk işleme performansına yardımcı olmak ve sayfa yeniden yüklemeleri için doğru kaydırma konumunu sağlamak üzere önceden tam bir öğe ItemSize boyutu sağlamak için kullanın. Varsayılan ayar, bazı öğelerin o anda görünür olan görünümün dışında işlemeye neden oluyorsa ItemSize ikinci bir yeniden işleme tetiklenir. Sanallaştırılmış bir listede tarayıcının kaydırma konumunu doğru şekilde korumak için ilk işlemenin doğru olması gerekir. Görüntülene ise kullanıcılar yanlış öğeleri sın sın dı.

Fazlacan sayısı

Virtualize<TItem>.OverscanCount , görünür bölgeden önce ve sonra kaç ek öğe işleneceklerini belirler. Bu ayar kaydırma sırasında işleme sıklığını azaltmaya yardımcı olur. Ancak, daha yüksek değerler sayfada işlenen daha fazla öğeyle sonuç verir (varsayılan: 3). Aşağıdaki örnek, varsayılan üç öğeden fazlacan sayısını dört öğeye değiştirir:

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

Durum değişiklikleri

Bileşen tarafından işlenen öğelerde değişiklik yaparken, bileşenin yeniden değerlendirilmesini ve yeniden değerlendirilmesini zorlamak Virtualize StateHasChanged için çağrısı yapın. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.