Blazor
- Renderização (ou não)
Blazor
- Renderização (ou não)
 |
Neste artigo vou apresentar os principais conceitos relacionados com a renderização de componentes Blazor. |
A renderização dos componentes Blazor na plataforma .NET é baseada no modelo de programação de renderização do lado do servidor (Server-side Blazor) ou no modelo de programação de renderização do lado do cliente (Client-side Blazor). Ambos os modelos compartilham o mesmo conceito básico de renderização de componentes Blazor.
Em ambos os modelos de renderização, os componentes Blazor são escritos usando C# e marcados com sintaxe semelhante ao HTML, chamada de Razor syntax. Os componentes são compostos de elementos HTML e código C#, permitindo que você crie interfaces de usuário interativas e dinâmicas com lógica de programação.
A seguir vamos apresentar os principais conceitos relacionados com a rendereização (ou não) do Blazor.
ComponentBase
Os componentes Blazor derivam da classe base ComponentBase que é fornecida pela biblioteca do Blazor e fornece a estrutura básica para criar componentes reutilizáveis no Blazor.
Ao criar um componente Blazor, você pode derivar sua classe de ComponentBase para aproveitar funcionalidades e recursos importantes. Esta classe define métodos e propriedades essenciais para o ciclo de vida do componente, manipulação de eventos, gerenciamento de estado e renderização.
Além disso, a classe ComponentBase também define o método RenderFragment, que é usado para especificar o conteúdo do componente, e, este conteúdo pode ser fornecido usando a sintaxe de marcação do Razor ou como um delegate de função.
IComponent
A interface IComponent é usada para implementar o renderizador de componentes no Blazor.
Esta inerface é parte do namespace Microsoft.AspNetCore.Components e define os métodos e propriedades necessários para criar um renderizador de componentes personalizado. Ela é implementada pela classe ComponentBase mencionada anteriormente, que fornece uma implementação padrão para a maioria dos métodos da interface.
A implementação da interface IComponent é essencial para permitir que um componente Blazor seja renderizado e interaja corretamente com o runtime do Blazor. Além disso, a interface IComponent define o método SetParameters, que é usado para atualizar os parâmetros do componente quando ocorrem alterações.
StateHasChanged
O método StateHasChanged é um método importante disponível nos componentes Blazor e é usado para sinalizar ao sistema de renderização que o estado do componente foi alterado e que uma atualização da interface do usuário é necessária.
Quando chamado, o método StateHasChanged notifica o sistema de renderização que o componente deve ser renderizado novamente. Isso significa que o método BuildRenderTree será chamado novamente para reconstruir a árvore de renderização do componente e gerar o HTML correspondente.
Isso pode ser muito útil, por exemplo, em conjunto com temporizadores ou tarefas assíncronas incompletas. Esteja ciente de que StateHasChanged deve ser chamado a partir da thread da interface do usuário, caso contrário, você receberá uma exceção.
No Blazor WASM atualmente há apenas um thread disponível, mas ainda assim é bom usar InvokeAsync para garantir que StateHasChanged seja executado no contexto correto.
OnAfterRender
O
método OnAfterRender é um método que pode ser
sobrescrito em um componente Blazor e é chamado após o componente e sua árvore
de renderização serem completamente renderizados no navegador.
Este método é útil quando você precisa executar alguma lógica ou interagir com o DOM após a renderização do componente ter sido concluída. Por exemplo, você pode querer fazer uma chamada a uma API externa, manipular um elemento HTML específico ou registrar um evento de JavaScript.
Desta forma esse método é chamado após o renderizador Blazor ter feito todos os outros eventos de ciclo de vida. Como o nome sugere, esse método de ciclo de vida é chamado após a última renderização. Se você deseja renderizar algo no OnAfterRender, pode utilizar nosso amigo StateHasChanged.
Existem duas variações do método OnAfterRender que podem ser implementadas:
OnAfterRender: Este é o método básico que é chamado após o componente e sua árvore de renderização serem renderizados pela primeira vez ou após cada atualização subsequente da renderização.
OnAfterRenderAsync: Esta variação do método OnAfterRender é usada quando você precisa realizar operações assíncronas após a renderização do componente.
É importante ter cuidado ao usar o método OnAfterRender e garantir que as operações realizadas não causem atualizações infinitas na renderização do componente. Se você modificar o estado do componente durante o método OnAfterRender, certifique-se de chamar o método StateHasChanged para sinalizar que a renderização deve ser atualizada.
A abordagem assíncrona
Muitos eventos de ciclo de vida são assíncronos (OnInitializedAsync), bem como manipuladores de eventos (MyEvent.InvokeAsync(someProp)), e, a abordagem assíncrona é um pouco especial.
Sempre no primeiro limite de espera, o pipeline Blazor acionará uma nova renderização e fara isso após a conclusão da tarefa.
Um
componente pai é renderizado antes de seus componentes filhos, pois a
renderização é o que determina quais filhos estão presentes.
Se a inicialização do componente pai síncrono for usada, a inicialização pai será concluída primeiro. Se a inicialização de componente pai assíncrono for usada, a ordem de conclusão da inicialização do componente pai e filho não poderá ser determinada, pois depende do código de inicialização em execução.
Observe a utilização dos métodos assíncronos: OnInitializedAsync e OnParemeterSetAsync.
DOM - Modelo de Objeto de Documento
Processamento de eventos de DOM (Modelo de Objeto do Documento):
Render
O ciclo de vida do Render:
ShouldRender for false.OnAfterRender{Async}.
ShouldRender
O método ShouldRender é um método que pode ser sobrescrito em um componente Blazor para controlar se o componente deve ser renderizado novamente ou não. Ele é chamado antes de iniciar o processo de renderização do componente e permite que você tome decisões com base em alterações de estado para determinar se uma atualização da interface do usuário é necessária.
Este método retorna um valor booleano que indica se o componente deve ser renderizado novamente. Se o método retornar true, o componente será renderizado; caso contrário, a renderização será ignorada.
Dentro do método ShouldRender, você pode implementar sua própria lógica personalizada para decidir se o componente precisa ser renderizado novamente. Isso pode incluir comparação de valores antigos e novos de propriedades, verificação de condições ou qualquer outro critério específico do seu componente.
A implementação típica do método ShouldRender envolve a comparação de valores de propriedades ou estado do componente para determinar se houve alterações significativas que exijam uma atualização da interface do usuário. Se você não precisa realizar verificações adicionais além da comparação padrão dos parâmetros, pode optar por não sobrescrever o método ShouldRender, permitindo que o comportamento padrão seja usado.
É importante ter cuidado ao implementar o método ShouldRender para garantir que a renderização seja realizada quando necessário. Certifique-se de levar em consideração todas as condições e alterações de estado relevantes para seu componente.
Parâmetros
Na renderização de componentes pai e filhos no Blazor, os parâmetros são usados para transmitir dados entre os componentes. Os componentes pais podem passar dados para seus componentes filhos por meio de parâmetros, permitindo que os filhos exibam e interajam com esses dados.
Existem dois tipos principais de parâmetros em um componente Blazor: parâmetros de componente e parâmetros de renderização.
1- Parâmetros de componente: Esses são os
parâmetros definidos em um componente Blazor usando a diretiva
Parameter. Os parâmetros de componente
são usados para definir dados que são passados para um componente filho.
2- Parâmetros de renderização: Além dos parâmetros de componente, é possível passar parâmetros durante a renderização de um componente usando a sintaxe do Razor. Esses parâmetros de renderização são usados para fornecer dados temporários ao componente filho durante a renderização.
Os parâmetros de componente e os parâmetros de renderização permitem uma comunicação eficiente entre os componentes pai e filhos. Eles permitem que os dados fluam de forma hierárquica e sejam atualizados conforme necessário. Os componentes filhos podem reagir a alterações nos parâmetros recebidos, atualizando sua própria renderização quando necessário.
Se você tiver uma combinação típica de pai/filho como esta:
<ChildComponent Value="@myValue"></ChildComponent>
Atualizar myValue levará a um novo ciclo de renderização para o pai e o filho.
Se o componente filho alterar internamente o myValue passado, o pai não será atualizado. A razão é que essas vinculações são unidirecionais. Dito isso, se de alguma forma seu componente filho influenciar seu componente pai, provavelmente você precisará chamar StateHasChanged em seu componente filho. Um exemplo seriam os diálogos modais, dependendo da forma como são implementados.
CascadingParameter
O CascadingParameter é um recurso poderoso do Blazor que permite que um valor seja fornecido em um componente pai e seja propagado automaticamente para todos os componentes filhos em uma hierarquia específica. Isso evita a necessidade de passar explicitamente um parâmetro de componente de pai para filho.
Quando o valor do parâmetro de cascata é definido no componente pai, ele é propagado automaticamente para todos os componentes filhos que possuem o mesmo parâmetro de cascata definido. Isso permite que os componentes filhos acessem o valor diretamente, sem a necessidade de passá-lo explicitamente.
A hierarquia do CascadingParameter pode ser aninhada, ou seja, um componente filho que recebe um parâmetro de cascata pode atuar como um componente pai e propagar esse valor para seus próprios componentes filhos. Isso permite que os dados fluam de forma hierárquica em toda a aplicação Blazor.
O CascadingParameter é especialmente útil quando você precisa compartilhar um valor ou estado com vários componentes sem a necessidade de passar manualmente o valor entre todos eles. Ele simplifica a comunicação entre componentes e melhora a organização do código.
Conclusão
O Blazor tem muitos eventos de ciclo de vida predefinidos em que os ciclos de
renderização são invocados automaticamente. Mas também existem alguns cenários
que não são cobertos automaticamente e você deve estar atento a este
comportamento.
E estamos conversados.
"Seja bendito o nome do Senhor, desde agora para
sempre."
Salmos 113:1
Referências: