El ciclo de vida de los componentes en ASP.NET Core Blazor es un aspecto fundamental para cualquier desarrollador que busque gestionar el estado, inicializar datos y liberar recursos de manera eficiente. Comprender estos métodos permite intervenir en momentos clave, desde que el cmoponente es instanciado hasta que se elimina del DOM.
SetParametersAsync
Este es el primer método que se ejecuta cuando se crea un componente o cuando el componente padre decide actualizar sus parámetros. Su función principal es asignar los valores a las propiedades decoradas con [Parameter] o [CascadingParameter] a través de un objeto ParameterView.
public override async Task SetParametersAsync(ParameterView parameters)
{
// Lógica personalizada antes de asignar parámetros
if (parameters.TryGetValue<string>("IdUsuario", out var id))
{
Console.WriteLine($"Recibiendo ID: {id}");
}
await base.SetParametersAsync(parameters);
}
OnInitialized y OnInitializedAsync
Una vez que los parámetros han sido asignados, se ejecutan estos métodos. Son ideales para realizar peticiones HTTP iniciales o cargar datos desde un servicio. En Blazor WebAssembly se ejecutan una sola vez, mientras que en Blazor Server (con pre-renderizado activo) pueden ejecutarse dos veces: una durante el renderizado estático inicial y otra cuando se establece la conexión SignalR.
protected override async Task OnInitializedAsync()
{
// Carga de datos inicial
await Task.Delay(100);
datosCargados = true;
}
OnParametersSet y OnParametersSetAsync
Estos métodos se activan inmediatamente después de la inicialización y cada vez que el componente padre actualiza los parámetros. Es el lugar adecuado para realizar cálculos o transformaciones que dependan directamente de los valores recibidos por parámetros.
protected override void OnParametersSet()
{
// Recalcular valores basados en los parámetros actuales
valorProcesado = parametroEntrada.ToUpper();
}
OnAfterRender y OnAfterRenderAsync
Se invocan después de que el componente ha terminado de renderizarse en el navegador. En este punto, las referencias a elementos (ElementReference) y componentes ya están disponibles. Es el momento idóneo para realizar interoperabilidad con JavaScript (JS Interop), ya que el DOM está listo.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
// Inicializar una librería de terceros o dar foco a un input
await JS.InvokeVoidAsync("inicializarMapa");
}
}
ShouldRender
Blazor ofrece la posibilidad de optimizar el rendimiento controlando si el componente debe actualizar su interfaz gráfica. Al sobrescribir ShouldRender, podemos evitar renderizados innecesarios devolviendo false si sabemos que el estado actual no requiere cambios visuales.
protected override bool ShouldRender()
{
// Solo renderizar si hay cambios significativos
return permitirRefresco;
}
Manejo de Eventos y StateHasChanged
El comportamiento del renderizado varía según si el manejador de eventos es síncrono o asíncrono. En métodos síncronos, StateHasChanged se invoca automáticamente al finalizar la ejecución. En métodos asíncronos, Blazor invoca StateHasChanged dos veces: primero cuando termina la parte síncrona inicial (al encontrar el primer await) y luego cuando la tarea se completa totalmente.
<button @onclick="ProcesarAccionAsync">Ejecutar Proceso</button>
@code {
private string mensaje = "Esperando...";
private async Task ProcesarAccionAsync()
{
mensaje = "Procesando...";
// Aquí se dispara el primer refresco de UI
await Task.Delay(2000);
mensaje = "Completado con éxito";
// Aquí se dispara el segundo refresco de UI al finalizar el Task
}
}
Liberación de Recursos con IDisposable
Para evitar fugas de memoria, es crucial limpiar suscripciones a eventos, detener temporizadores o cancelar tokens de cancelación cuando un componente deja de existir. Para ello, se utiliza la interfaz IDisposable.
@implements IDisposable
@code {
public void Dispose()
{
// Limpieza de recursos, cancelación de timers o desuscripción de eventos
Console.WriteLine("Componente destruido, recursos liberados.");
}
}