Evitare di sovrascrivere i parametri in ASP.NET Core Blazor

Di Robert Haken

Questo articolo illustra come evitare la sovrascrittura dei parametri nelle Blazor app durante il rerendering.

Parametri sovrascritti

Il framework Blazor impone in genere l'assegnazione sicura dei parametri da padre a figlio:

• I parametri non vengono sovrascritti in modo imprevisto.
• Gli effetti collaterali sono ridotti al minimo. Ad esempio, vengono evitati rendering aggiuntivi perché possono creare cicli di rendering infiniti.

Un componente figlio riceve nuovi valori di parametro che potrebbero sovrascrivere i valori esistenti quando il componente padre riesegue il rendering. La sovrascrittura accidentale dei valori dei parametri in un componente figlio si verifica spesso quando si sviluppa il componente con uno o più parametri associati a dati e lo sviluppatore scrive direttamente in un parametro dell'elemento figlio:

• Il rendering del componente figlio viene eseguito con uno o più valori dei parametri del componente padre.
• L'elemento figlio scrive direttamente nel valore di un parametro.
• Il componente padre riesegue il rendering e sovrascrive il valore del parametro dell'elemento figlio.

La possibilità di sovrascrivere i valori dei parametri si estende anche alle funzioni di accesso set delle proprietà dell'elemento figlio.

Importante

L'indicazione generale è di non creare componenti che scrivano direttamente nei propri parametri dopo che il rendering del componente è stato eseguito per la prima volta.

Si consideri il componente ShowMoreExpander seguente che:

• Esegue il rendering del titolo.
• Mostra il contenuto figlio quando selezionato.
• Consente di impostare lo stato iniziale con un parametro del componente (InitiallyExpanded).

Dopo che il componente ShowMoreExpander seguente illustra un parametro sovrascritto, viene mostrato un componente ShowMoreExpander modificato per illustrare l'approccio corretto per questo scenario. Gli esempi seguenti possono essere inseriti in un'app di esempio locale per sperimentare i comportamenti descritti.

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;
}

Il componente ShowMoreExpander viene aggiunto al componente padre Expanders seguente che può chiamare StateHasChanged:

• La chiamata StateHasChanged nel codice dello sviluppatore notifica a un componente che il relativo stato è stato modificato e in genere accoda il rerendering del componente per aggiornare l'interfaccia utente. StateHasChanged è illustrato più dettagliatamente più avanti in Ciclo di vita dei componenti di ASP.NET Core Razor e Rendering dei componenti di ASP.NET Core Razor.
• L'attributo della direttiva @onclick del pulsante associa un gestore eventi all'evento onclick del pulsante. La gestione degli eventi viene descritta più dettagliatamente più avanti in Gestione degli eventi di ASP.NET Core Blazor.

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>

Inizialmente, i ShowMoreExpander componenti si comportano in modo indipendente quando vengono impostate le relative InitiallyExpanded proprietà. I componenti figlio mantengono gli stati come previsto.

Se StateHasChanged viene chiamato in un componente padre, il framework Blazor riesegue il rendering dei componenti figlio se c'è la possibilità che i parametri siano stati modificati:

• Per un gruppo di tipi di parametro che Blazor controlla in modo esplicito, Blazor riesegue il rendering di un componente figlio se rileva che uno dei parametri è stato modificato.
• Per i tipi di parametro non controllati, Blazor riesegue il rendering del componente figlio indipendentemente dal fatto che i parametri siano stati modificati o meno. Il contenuto figlio rientra in questa categoria di tipi di parametro perché il contenuto figlio è di tipo RenderFragment, che è un delegato che fa riferimento ad altri oggetti modificabili.

Per il componente Expanders:

• Il primo ShowMoreExpander componente imposta il contenuto figlio in un oggetto potenzialmente modificabile RenderFragment, quindi una chiamata a StateHasChanged nel componente padre esegue automaticamente il rendering del componente e potenzialmente sovrascrive il valore di InitiallyExpanded al valore iniziale di false.
• Il secondo componente ShowMoreExpander non imposta il contenuto figlio. Non esiste quindi un delegato RenderFragment potenzialmente modificabile. Una chiamata a StateHasChanged nel componente padre non riesegue automaticamente il rendering del componente figlio, quindi il valore InitiallyExpanded del componente non viene sovrascritto.

Per mantenere lo stato nello scenario precedente, usare un campo privato nel ShowMoreExpander componente per mantenere lo stato.

Il componente ShowMoreExpander modificato seguente:

• Accetta il valore del parametro del componente InitiallyExpanded dall'elemento padre.
• Assegna il valore del parametro del componente a un campo privato (expanded) nell'evento OnInitialized.
• Usa il campo privato per mantenere lo stato interno di attivazione/disattivazione, illustrando come evitare di scrivere direttamente in un parametro.

Nota

Il consiglio di questa sezione si estende a una logica simile nelle funzioni di accesso set dei parametri del componente, che possono causare effetti collaterali indesiderati simili.

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;
}

Nota

La revisione ShowMoreExpander non riflette le modifiche apportate al parametro dopo l'inizializzazione InitiallyExpanded (OnInitialized). In alcuni scenari, un componente già inizializzato potrebbe ricevere nuovi valori di parametro. Ciò può verificarsi, ad esempio, in una visualizzazione primaria subordinata in cui viene usato lo stesso componente per eseguire il rendering di visualizzazioni dettagli diverse o quando il parametro di /item/{id} route cambia per visualizzare un elemento diverso.

Si consideri il componente seguente ToggleExpander :

• Consente di modificare lo stato sia dall'interno che dall'esterno.
• Gestisce i nuovi valori dei parametri anche se viene riutilizzata la stessa istanza del componente.

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);
    }
}

Il ToggleExpander componente deve essere usato con la @bind-Expanded="{field}" sintassi di associazione, consentendo la sincronizzazione bidirezionale del parametro.

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;
}

Per altre informazioni sull'associazione padre-figlio, vedere le risorse seguenti:

• Associazione con parametri del componente
• Eseguire l'associazione tra più di due componenti
• Blazor Errore di associazione bidirezionale (dotnet/aspnetcore #24599)

Per altre informazioni sul rilevamento delle modifiche, incluse le informazioni sui tipi esatti che Blazor controllano, vedere ASP.NET rendering dei componenti principaliRazor.