Hindari menimpa parameter di ASP.NET Core Blazor

Oleh Robert Haken

Artikel ini menjelaskan cara menghindari penimpaan parameter di Blazor aplikasi selama penyajian ulang.

Parameter yang ditimpa

Kerangka kerja Blazor umumnya menerapkan penetapan parameter induk-ke-turunan yang aman:

• Parameter tidak ditimpa secara tidak terduga.
• Efek samping diminimalkan. Misalnya, render tambahan dihindari karena dapat membuat perulangan perenderan tak terbatas.

Komponen turunan menerima nilai parameter baru yang mungkin menimpa nilai yang ada saat komponen induk dirender ulang. Menimpa nilai parameter dalam komponen turunan secara tidak sengaja sering terjadi saat mengembangkan komponen dengan satu atau beberapa parameter terikat data dan pengembang menulis langsung ke parameter di turunan:

• Komponen turunan dirender dengan satu atau beberapa nilai parameter dari komponen induk.
• Turunan menulis langsung ke nilai parameter.
• Komponen induk dirender ulang dan menimpa nilai parameter turunan.

Potensi untuk menimpa nilai parameter juga diperluas ke pengakses set properti komponen turunan.

Penting

Panduan umum kami adalah untuk tidak membuat komponen yang langsung menulis ke parameter mereka sendiri setelah komponen dirender untuk pertama kalinya.

Pertimbangkan komponen ShowMoreExpander berikut yang:

• Merender judul.
• Memperlihatkan isi anak ketika dipilih.
• Memungkinkan Anda mengatur status awal dengan parameter komponen (InitiallyExpanded).

Setelah komponen ShowMoreExpander berikut menunjukkan parameter yang ditimpa, komponen ShowMoreExpander yang dimodifikasi ditampilkan untuk menunjukkan pendekatan yang benar untuk skenario ini. Contoh berikut dapat ditempatkan di aplikasi sampel lokal untuk mengalami perilaku yang dijelaskan.

ShowMoreExpander.razor:

<div @onclick="ShowMore" class="card bg-light mb-3" style="width:30rem">
    <div class="card-header">
        <h2 class="card-title">Show more (<code>Expanded</code> = @InitiallyExpanded)</h2>
    </div>
    @if (InitiallyExpanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    [Parameter]
    public bool InitiallyExpanded { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    private void ShowMore()
    {
        InitiallyExpanded = true;
    }
}

Komponen ShowMoreExpander ditambahkan ke komponen induk Expanders berikut yang mungkin memanggil StateHasChanged:

• Memanggil StateHasChanged dalam kode pengembang memberi tahu komponen bahwa statusnya telah berubah dan biasanya memicu perenderan ulang komponen untuk memperbarui antarmuka pengguna. StateHasChanged dibahas lebih rinci nanti di Siklus hidup komponenRazor ASP.NET Core dan Perenderan komponen Razor ASP.NET Core.
• Atribut arahan @onclick tombol melampirkan penanganan aktivitas ke peristiwa onclick tombol. Penanganan aktivitas dibahas lebih rinci nanti di Penanganan aktivitas Blazor ASP.NET Core.

Expanders.razor:

@page "/expanders"

<PageTitle>Expanders</PageTitle>

<h1>Expanders Example</h1>

<ShowMoreExpander InitiallyExpanded="false">
    Expander 1 content
</ShowMoreExpander>

<ShowMoreExpander InitiallyExpanded="false" />

<button @onclick="StateHasChanged">Call StateHasChanged</button>

Awalnya, ShowMoreExpander komponen berperilaku independen ketika propertinya InitiallyExpanded diatur. Komponen turunan mempertahankan statusnya seperti yang diharapkan.

Jika StateHasChanged dipanggil dalam komponen induk, kerangka kerja Blazor merender ulang komponen turunan jika parameternya mungkin telah berubah:

• Untuk grup jenis parameter yang diperiksa Blazor secara eksplisit, Blazor merender ulang komponen turunan jika mendeteksi bahwa ada parameter yang berubah.
• Untuk jenis parameter yang tidak diperiksa, Blazor merender ulang komponen turunan terlepas dari apakah parameter telah berubah atau tidak. Konten turunan termasuk dalam kategori jenis parameter ini karena konten turunan berjenis RenderFragment, yang merupakan delegasi yang merujuk ke objek lain yang dapat diubah.

Untuk komponen Expanders:

• Komponen pertama ShowMoreExpander mengatur konten anak dalam yang berpotensi dapat diubah RenderFragment, sehingga panggilan ke StateHasChanged di komponen induk secara otomatis mererender komponen dan berpotensi menimpa nilai InitiallyExpanded ke nilai awalnya .false
• Komponen ShowMoreExpander kedua tidak mengatur konten turunan. Oleh karena itu, RenderFragment yang berpotensi dapat diubah tidak ada. Panggilan ke StateHasChanged di komponen induk tidak secara otomatis merender ulang komponen turunan, sehingga nilai InitiallyExpanded komponen tidak ditimpa.

Untuk mempertahankan status dalam skenario sebelumnya, gunakan bidang privat dalam ShowMoreExpander komponen untuk mempertahankan statusnya.

Komponen ShowMoreExpander yang direvisi berikut ini:

• Menerima nilai parameter komponen InitiallyExpanded dari induknya.
• Menetapkan nilai parameter komponen ke bidang privat (expanded) di peristiwa OnInitialized.
• Menggunakan bidang privat untuk mempertahankan status pengalih internalnya, yang menunjukkan cara menghindari penulisan langsung ke parameter.

Catatan

Saran di bagian ini diperluas ke logika serupa dalam pengakses set parameter komponen, yang dapat mengakibatkan efek samping tidak diinginkan yang serupa.

ShowMoreExpander.razor:

<div @onclick="Expand" class="card bg-light mb-3" style="width:30rem">
    <div class="card-header">
        <h2 class="card-title">Show more (<code>Expanded</code> = @expanded)</h2>
    </div>
    @if (expanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    private bool expanded;

    [Parameter]
    public bool InitiallyExpanded { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    protected override void OnInitialized()
    {
        expanded = InitiallyExpanded;
    }

    private void Expand()
    {
        expanded = true;
    }
}

Catatan

Revisi tidak mencerminkan ShowMoreExpander perubahan pada InitiallyExpanded parameter setelah inisialisasi (OnInitialized). Dalam skenario tertentu, komponen yang sudah diinisialisasi mungkin menerima nilai parameter baru. Ini dapat terjadi, misalnya, dalam tampilan detail master di mana komponen yang sama digunakan untuk merender tampilan detail yang berbeda atau ketika /item/{id} parameter rute berubah untuk menampilkan item yang berbeda.

Pertimbangkan komponen berikut ToggleExpander yang:

• Memungkinkan Anda mengubah status baik dari dalam maupun luar.
• Menangani nilai parameter baru meskipun instans komponen yang sama digunakan kembali.

ToggleExpander.razor:

<div class="card bg-light mb-3" style="width:30rem">
    <div @onclick="Toggle" class="card-header">
        <h2 class="card-title">Toggle (<code>Expanded</code> = @expanded)</h2>
    </div>
    @if (expanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }

    [Parameter]
    public EventCallback<bool> ExpandedChanged { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    private bool expanded;

    protected override void OnParametersSet()
    {
        expanded = Expanded;
    }

    private async void Toggle()
    {
        expanded = !expanded;
        await ExpandedChanged.InvokeAsync(expanded);
    }
}

Komponen ToggleExpander harus digunakan dengan @bind-Expanded="{field}" sintaks pengikatan, memungkinkan sinkronisasi parameter dua arah.

ExpandersToggle.razor:

@page "/expanders-toggle"

<PageTitle>Expanders Toggle</PageTitle>

<h1>Expanders Toggle</h1>

<ToggleExpander @bind-Expanded="expanded">
    Expander content
</ToggleExpander>

<button @onclick="Toggle">Toggle</button>

<button @onclick="StateHasChanged">Call StateHasChanged</button>

@code {
    private bool expanded;

    private void Toggle()
    {
        expanded = !expanded;
    }
}

Untuk informasi selengkapnya tentang pengikatan induk-turunan, lihat sumber daya berikut ini:

• Pengikatan dengan parameter komponen
• Mengikat di lebih dari dua komponen
• Blazor Kesalahan Pengikatan Dua Arah (dotnet/aspnetcore #24599)

Untuk informasi selengkapnya tentang deteksi perubahan, termasuk informasi tentang jenis yang tepat yang Blazor memeriksa, lihat ASP.NET penyajian komponen CoreRazor.