Ciclo de ASP.NET Core BlazorASP.NET Core Blazor lifecycle

De Luke Latham e Daniel RothBy Luke Latham and Daniel Roth

O Blazor Framework inclui métodos de ciclo de vida síncronos e assíncronos.The Blazor framework includes synchronous and asynchronous lifecycle methods. Substitua métodos de ciclo de vida para executar operações adicionais em componentes durante a inicialização e a renderização do componente.Override lifecycle methods to perform additional operations on components during component initialization and rendering.

Métodos de ciclo de vidaLifecycle methods

Métodos de inicialização de componenteComponent initialization methods

OnInitializedAsync e OnInitialized são invocados quando o componente é inicializado após ter recebido seus parâmetros iniciais de seu componente pai.OnInitializedAsync and OnInitialized are invoked when the component is initialized after having received its initial parameters from its parent component. Use OnInitializedAsync quando o componente executa uma operação assíncrona e deve ser atualizado quando a operação é concluída.Use OnInitializedAsync when the component performs an asynchronous operation and should refresh when the operation is completed. Esses métodos são chamados apenas uma vez quando o componente é instanciado primeiro.These methods are only called one time when the component is first instantiated.

Para uma operação síncrona, substitua OnInitialized:For a synchronous operation, override OnInitialized:

protected override void OnInitialized()
{
    ...
}

Para executar uma operação assíncrona, substitua OnInitializedAsync e use a palavra-chave await na operação:To perform an asynchronous operation, override OnInitializedAsync and use the await keyword on the operation:

protected override async Task OnInitializedAsync()
{
    await ...
}

Antes de os parâmetros serem definidosBefore parameters are set

SetParametersAsync define os parâmetros fornecidos pelo pai do componente na árvore de renderização:SetParametersAsync sets parameters supplied by the component's parent in the render tree:

public override async Task SetParametersAsync(ParameterView parameters)
{
    await ...

    await base.SetParametersAsync(parameters);
}

ParameterView contém todo o conjunto de valores de parâmetro sempre que SetParametersAsync é chamado.ParameterView contains the entire set of parameter values each time SetParametersAsync is called.

A implementação padrão de SetParametersAsync define o valor de cada propriedade com o atributo [Parameter] ou [CascadingParameter] que tem um valor correspondente no ParameterView.The default implementation of SetParametersAsync sets the value of each property with the [Parameter] or [CascadingParameter] attribute that has a corresponding value in the ParameterView. Os parâmetros que não têm um valor correspondente em ParameterView são deixados inalterados.Parameters that don't have a corresponding value in ParameterView are left unchanged.

Se base.SetParametersAync não for invocado, o código personalizado poderá interpretar o valor dos parâmetros de entrada de qualquer forma necessária.If base.SetParametersAync isn't invoked, the custom code can interpret the incoming parameters value in any way required. Por exemplo, não há nenhum requisito para atribuir os parâmetros de entrada às propriedades na classe.For example, there's no requirement to assign the incoming parameters to the properties on the class.

Depois que os parâmetros são definidosAfter parameters are set

OnParametersSetAsync e OnParametersSet são chamados:OnParametersSetAsync and OnParametersSet are called:

  • Quando o componente é inicializado e recebeu seu primeiro conjunto de parâmetros de seu componente pai.When the component is initialized and has received its first set of parameters from its parent component.
  • Quando o componente pai é renderizado novamente e fornece:When the parent component re-renders and supplies:
    • Somente tipos irmutáveis de primitivo conhecidos dos quais pelo menos um parâmetro foi alterado.Only known primitive immutable types of which at least one parameter has changed.
    • Qualquer parâmetro de tipo complexo.Any complex-typed parameters. A estrutura não pode saber se os valores de um parâmetro de tipo complexo foram modificados internamente e, portanto, trata o conjunto de parâmetros como alterado.The framework can't know whether the values of a complex-typed parameter have mutated internally, so it treats the parameter set as changed.
protected override async Task OnParametersSetAsync()
{
    await ...
}

Observação

O trabalho assíncrono ao aplicar parâmetros e valores de propriedade deve ocorrer durante o evento de ciclo de vida OnParametersSetAsync.Asynchronous work when applying parameters and property values must occur during the OnParametersSetAsync lifecycle event.

protected override void OnParametersSet()
{
    ...
}

Após renderização de componenteAfter component render

OnAfterRenderAsync e OnAfterRender são chamados após a conclusão da renderização de um componente.OnAfterRenderAsync and OnAfterRender are called after a component has finished rendering. Referências de elemento e componente são preenchidas neste ponto.Element and component references are populated at this point. Use este estágio para executar etapas de inicialização adicionais usando o conteúdo renderizado, como a ativação de bibliotecas JavaScript de terceiros que operam nos elementos DOM renderizados.Use this stage to perform additional initialization steps using the rendered content, such as activating third-party JavaScript libraries that operate on the rendered DOM elements.

O parâmetro firstRender para OnAfterRenderAsync e OnAfterRender:The firstRender parameter for OnAfterRenderAsync and OnAfterRender:

  • É definido como true na primeira vez que a instância do componente é renderizada.Is set to true the first time that the component instance is rendered.
  • Pode ser usado para garantir que o trabalho de inicialização seja executado apenas uma vez.Can be used to ensure that initialization work is only performed once.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await ...
    }
}

Observação

O trabalho assíncrono imediatamente após a renderização deve ocorrer durante o evento de ciclo de vida OnAfterRenderAsync.Asynchronous work immediately after rendering must occur during the OnAfterRenderAsync lifecycle event.

Mesmo que você retorne um Task de OnAfterRenderAsync, a estrutura não agendará um ciclo de processamento adicional para o componente depois que a tarefa for concluída.Even if you return a Task from OnAfterRenderAsync, the framework doesn't schedule a further render cycle for your component once that task completes. Isso é para evitar um loop de renderização infinito.This is to avoid an infinite render loop. Ele é diferente dos outros métodos de ciclo de vida, que agendam um ciclo de processamento adicional depois que a tarefa retornada é concluída.It's different from the other lifecycle methods, which schedule a further render cycle once the returned task completes.

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        ...
    }
}

OnAfterRender e OnAfterRenderAsync não são chamados durante o pré-processamento no servidor.OnAfterRender and OnAfterRenderAsync aren't called when prerendering on the server.

Suprimir atualização da interface do usuárioSuppress UI refreshing

Substitua ShouldRender para suprimir a atualização da interface do usuário.Override ShouldRender to suppress UI refreshing. Se a implementação retornar true, a interface do usuário será atualizada:If the implementation returns true, the UI is refreshed:

protected override bool ShouldRender()
{
    var renderUI = true;

    return renderUI;
}

ShouldRender é chamado cada vez que o componente é renderizado.ShouldRender is called each time the component is rendered.

Mesmo se ShouldRender for substituído, o componente será sempre renderizado inicialmente.Even if ShouldRender is overridden, the component is always initially rendered.

Alterações de estadoState changes

StateHasChanged notifica o componente de que seu estado foi alterado.StateHasChanged notifies the component that its state has changed. Quando aplicável, chamar StateHasChanged faz com que o componente seja rerenderizado.When applicable, calling StateHasChanged causes the component to be rerendered.

Tratar ações assíncronas incompletas no processamentoHandle incomplete async actions at render

Ações assíncronas executadas em eventos de ciclo de vida podem não ter sido concluídas antes de o componente ser renderizado.Asynchronous actions performed in lifecycle events might not have completed before the component is rendered. Os objetos podem ser null ou preenchidos incompletamente com dados enquanto o método de ciclo de vida está em execução.Objects might be null or incompletely populated with data while the lifecycle method is executing. Forneça a lógica de renderização para confirmar que os objetos são inicializados.Provide rendering logic to confirm that objects are initialized. Renderizar elementos de interface do usuário de espaço reservado (por exemplo, uma mensagem de carregamento) enquanto os objetos são null.Render placeholder UI elements (for example, a loading message) while objects are null.

No componente FetchData dos modelos de Blazor, OnInitializedAsync é substituído para Asychronously receber dados de previsão (forecasts).In the FetchData component of the Blazor templates, OnInitializedAsync is overridden to asychronously receive forecast data (forecasts). Quando forecasts é null, uma mensagem de carregamento é exibida para o usuário.When forecasts is null, a loading message is displayed to the user. Depois que o Task retornado pela OnInitializedAsync for concluído, o componente será rerenderizado com o estado atualizado.After the Task returned by OnInitializedAsync completes, the component is rerendered with the updated state.

Páginas/FetchData. Razor no modelo do Blazor Server:Pages/FetchData.razor in the Blazor Server template:

@page "/fetchdata"
@using MyBlazorApp.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (_forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <!-- forecast data in table element content -->
    </table>
}

@code {
    private WeatherForecast[] _forecasts;

    protected override async Task OnInitializedAsync()
    {
        _forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

Descarte de componentes com IDisposableComponent disposal with IDisposable

Se um componente implementar IDisposable, o método Dispose será chamado quando o componente for removido da interface do usuário.If a component implements IDisposable, the Dispose method is called when the component is removed from the UI. O componente a seguir usa @implements IDisposable e o método Dispose:The following component uses @implements IDisposable and the Dispose method:

@using System
@implements IDisposable

...

@code {
    public void Dispose()
    {
        ...
    }
}

Observação

Não há suporte para a chamada de StateHasChanged em Dispose.Calling StateHasChanged in Dispose isn't supported. StateHasChanged pode ser invocado como parte da subdivisão do renderizador, portanto, não há suporte para a solicitação de atualizações da interface do usuário nesse ponto.StateHasChanged might be invoked as part of tearing down the renderer, so requesting UI updates at that point isn't supported.

Tratar errosHandle errors

Para obter informações sobre como lidar com erros durante a execução do método de ciclo de vida, consulte Tratar erros em aplicativos ASP.NET Core Blazor.For information on handling errors during lifecycle method execution, see Tratar erros em aplicativos ASP.NET Core Blazor.