Vermijd het overschrijven van parameters in ASP.NET Core Blazor

Door Robert Haken

In dit artikel wordt uitgelegd hoe u het overschrijven van parameters in apps tijdens Blazor rerendering kunt voorkomen.

Overschreven parameters

Het Blazor framework zorgt over het algemeen voor een veilige toewijzing van ouder-tot-kind parameters.

• Parameters worden niet onverwacht overschreven.
• Bijwerkingen worden geminimaliseerd. Extra renders worden bijvoorbeeld vermeden omdat ze oneindige renderinglussen kunnen maken.

Een onderliggend onderdeel ontvangt nieuwe parameterwaarden die bestaande waarden mogelijk overschrijven wanneer het bovenliggende onderdeel opnieuw wordt uitgevoerd. Het per ongeluk overschrijven van parameterwaarden in een onderliggend onderdeel vindt vaak plaats bij het ontwikkelen van het onderdeel met een of meer gegevensgebonden parameters en de ontwikkelaar schrijft rechtstreeks naar een parameter in het onderliggende onderdeel:

• Het subonderdeel wordt weergegeven met een of meer parameterwaarden van het hoofdonderdeel.
• Het kind schrijft rechtstreeks naar de waarde van een parameter.
• Het bovenliggende component rendert opnieuw en overschrijft de waarde van de parameter van het kindcomponent.

Het potentieel voor het overschrijven van parameterwaarden strekt zich ook uit tot de eigenschapstoegangen set van de onderliggende component.

Belangrijk

Onze algemene richtlijnen zijn niet het maken van onderdelen die rechtstreeks naar hun eigen parameters schrijven nadat het onderdeel voor het eerst wordt weergegeven.

Houd rekening met het volgende ShowMoreExpander onderdeel:

• Geeft de titel weer.
• Geeft de kindinhoud weer wanneer deze is geselecteerd.
• Hiermee kunt u de initiële status instellen met een onderdeelparameter (InitiallyExpanded).

Nadat het volgende ShowMoreExpander onderdeel een overschreven parameter demonstreert, wordt een gewijzigd ShowMoreExpander onderdeel weergegeven om de juiste benadering voor dit scenario te demonstreren. De volgende voorbeelden kunnen in een lokale voorbeeld-app worden geplaatst om het gedrag te ervaren dat wordt beschreven.

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

Het ShowMoreExpander onderdeel wordt toegevoegd aan het volgende Expanders bovenliggende onderdeel dat mogelijk StateHasChanged kan aanroepen.

• Het aanroepen van StateHasChanged in ontwikkelaarscode informeert een component dat de status ervan is gewijzigd en sorteert meestal componenther-rendering om de gebruikersinterface bij te werken. StateHasChanged verderop in Razor en ASP.NET Core component rendering nader wordt besproken.
• Het instructiekenmerk @onclick koppelt een gebeurtenishandler aan de onclick gebeurtenis van de knop. Gebeurtenisafhandeling wordt verderop in ASP.NET Core-gebeurtenisafhandeling Blazoruitgebreider behandeld.

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>

In eerste instantie gedragen de ShowMoreExpander onderdelen zich onafhankelijk wanneer hun InitiallyExpanded eigenschappen worden ingesteld. De kindcomponenten behouden hun statussen zoals zou worden verwacht.

Als StateHasChanged wordt aangeroepen in een bovenliggend onderdeel, worden onderliggende onderdelen opnieuw gerenderd in het Blazor framework als hun parameters mogelijk zijn gewijzigd.

• Voor een groep parametertypen die Blazor expliciet controleert, Blazor voert u een onderliggend onderdeel opnieuw in als wordt gedetecteerd dat een van de parameters is gewijzigd.
• Voor niet-ingeschakelde parametertypen voert u het onderliggende onderdeel opnieuw uit, Blazorongeacht of de parameters al dan niet zijn gewijzigd. Onderliggende inhoud valt in deze categorie van parametertypen omdat onderliggende inhoud van het type RenderFragment is, wat een gedelegeerde is die verwijst naar andere veranderlijke objecten.

Voor het Expanders onderdeel:

• Met het eerste ShowMoreExpander onderdeel wordt kindinhoud ingesteld in een mogelijk veranderlijk RenderFragment, zodat een aanroep naar StateHasChanged in de bovenliggende component het onderdeel automatisch opnieuw rendert en mogelijk de waarde van InitiallyExpanded naar de initiële waarde van false overschrijft.
• Het tweede ShowMoreExpander onderdeel definieert geen kindinhoud. Daarom bestaat er geen mogelijk veranderlijke RenderFragment . Een aanroep naar StateHasChanged in het bovenliggende onderdeel zorgt er niet automatisch voor dat het onderliggende onderdeel opnieuw wordt uitgevoerd, daardoor wordt de waarde van InitiallyExpanded in het onderdeel niet overschreven.

Als u de status in het voorgaande scenario wilt behouden, gebruikt u een privéveld in het onderdeel om de ShowMoreExpander status te behouden.

Het volgende herziene ShowMoreExpander onderdeel:

• Accepteert de InitiallyExpanded component parameterwaarde van de ouder.
• Hiermee wordt de parameterwaarde van het onderdeel toegewezen aan een privéveld (expanded) in de OnInitialized gebeurtenis.
• Gebruikt het privéveld om de interne schakeltoestand te behouden, wat laat zien hoe u kunt voorkomen dat u direct naar een parameter schrijft.

Opmerking

Het advies in deze sectie breidt zich uit tot vergelijkbare logica in componentparametertoegangsmethodenset, wat kan leiden tot vergelijkbare ongewenste bijwerkingen.

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

Opmerking

De herziene ShowMoreExpander versie weerspiegelt geen wijzigingen in de InitiallyExpanded parameter na initialisatie (OnInitialized). In bepaalde scenario's kan een al geïnitialiseerd onderdeel nieuwe parameterwaarden ontvangen. Dit kan bijvoorbeeld gebeuren in een primaire ondergeschikte weergave waarin hetzelfde onderdeel wordt gebruikt om verschillende detailweergaven weer te geven of wanneer de /item/{id} routeparameter verandert om een ander item weer te geven.

Overweeg het volgende ToggleExpander onderdeel:

• Hiermee kunt u de status zowel van binnen als buiten wijzigen.
• Hiermee kan de verwerking van nieuwe parameterwaarden gebeuren, zelfs als dezelfde component opnieuw wordt gebruikt.

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 Task Toggle()
    {
        expanded = !expanded;
        await ExpandedChanged.InvokeAsync(expanded);
    }
}

Het ToggleExpander onderdeel moet worden gebruikt met de @bind-Expanded="{field}" bindingsyntaxis, zodat de parameter in twee richtingen kan worden gesynchroniseerd.

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

Zie de volgende bronnen voor meer informatie over ouder-kind binding:

• Binding met onderdeelparameters
• Binden tussen meer dan twee onderdelen
• Blazor Bindingsfout in twee richtingen (dotnet/aspnetcore #24599)

Zie Blazor voor meer informatie over wijzigingsdetectie, inclusief informatie over de exacte typen die Razor worden gecontroleerd.