Lifecycle Methods do Blazor

Existem alguns métodos dos componentes Blazor, que podemos utilizar para executar código em determinados pontos do Ciclo de Vida do Componente.

O ciclo de vida de um componente Blazor é marcado pelos seguintes eventos:

Inicialização do Componente
Recepção de Parâmetros do Componente Pai
Término da Renderização do Componente
“Desconstrução” do Componente

OnInit e OnInitAsync

O método OnInit, e o seu respectivo assíncrono OnInitAsync, é executado quando o componente é inicializado.

Podemos sobrecarregar esse método para executar algum código na inicialização do Componente. Devemos utilizar a versão assíncrona desse método se o código a ser executado na inicialização for assíncrono.

Veja um exemplo na Figura 1.

Figura 1: OnInit – Inicialização do Componente

OnParametersSet e OnParametersSetAsync

O método OnParametersSet é executado no momento em que o componente receber os seus parâmetros do componente Pai.

Então, sempre que você precisar executar algum código de inicialização que dependa dos valores enviados por parâmetros, você deve sobrecarregar o método OnParametersSet ou o OnParametersSetAsync, para executar código assíncrono.

Veja Figura 2.

Figura 2: OnParametersSet – Recepção de Parâmetros

OnAfterRender e OnAfterRenderAsync

Quando precisarmos executar algum código, depois que a interface do componente for completamente renderizada, devemos sobrecarregar o método OnAfterRender, ou o seu respectivo assíncrono OnAfterRenderAsync. Veja Figura 3.

Figura 3: OnAfterRender – Término da Renderização do Componente

Dispose

Também podemos executar código na desconstrução do componente. Entenda como desconstrução o momento em que navegamos para um outro componente, e o componente inicial “some” da interface.

Para isso precisamos implementar a interface IDisposable e o seu respectivo método Dispose. Veja na Figura 4, como fazemos isso em um componente.

Figura 4: Dispose – Desconstrução do Componente

Testando

Para que você veja o ciclo completo de vida do componente, implemente todos esses métodos em um componente, coloque-o no Index.razor, e faça um teste olhando para o Console do Browser.