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.

Confira a execução desse teste aqui na Figura 5.

Grande Abraço e até o próximo!

2 comentários em “Lifecycle Methods do Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s