Bases de Blazor : (re)rendu du composant Blazor
Le rendu des composants est un mécanisme essentiel des applications Blazor transformant les composants C# en HTML et CSS. Les méthodes de cycle de vie nous permettent d’exécuter du code personnalisé de manière synchrone ou asynchrone.
Les applications Blazor consistent en une arborescence de composants Blazor qui créent une interface utilisateur interactive. Le rendu commence au sommet de l’arborescence et descend jusqu’aux enfants de chaque composant.
La raison du rendu descendant de la hiérarchie des composants est que le composant parent décide quels composants enfants sont créés.
Dans cet article, nous apprenons comment Blazor restitue les composants et comment injecter du code personnalisé dans le cycle de vie des composants.
Méthodes de cycle de vie des composants Blazor
Le processus de rendu ne peut pas être interrompu ; sinon, l’interface utilisateur ne répondrait pas.
C’est pourquoi les composants Blazor utilisent des méthodes de cycle de vie pour permettre l’exécution de code pendant la durée de vie d’un composant. Une méthode de cycle de vie est appelée lorsqu’un événement spécifique est déclenché pendant la durée de vie du composant.
Un composant Blazor est rendu pour la première fois après la création de son instance lorsqu’il est inclus en tant que composant enfant.
La méthode de cycle de vie SetParametersAsync
La première méthode de rappel dans le cycle de vie des composants est la SetParametersAsync
méthode. Il obtient les paramètres fournis par le composant parent.
En remplaçant le SetParametersAsync
méthode, nous pouvons utiliser du code personnalisé pour modifier les valeurs fournies par le composant parent.
Avec l’implémentation par défaut, les paramètres seront définis sur les propriétés décorées avec l’attribut Parameter. Si nous souhaitons utiliser les paramètres du composant différemment, nous pouvons utiliser du code personnalisé et remplacer le SetParametersAsync
méthode pour définir le comportement souhaité.
@code {
private int TitleLength = 0;
[Parameter]
public string? Title { get; set; }
public override async Task SetParametersAsync(ParameterView parameters)
{
if (parameters.TryGetValue<string>(nameof(Title), out var value))
{
if (value is null)
{
TitleLength = 0;
}
else
{
TitleLength = Title.Length;
}
}
await base.SetParametersAsync(parameters);
}
}
Le SetParametersAsync
La méthode du cycle de vie n’est appelée que pour le premier rendu d’un composant Blazor.
Méthodes de cycle de vie OnInitialized et OnInitializedAsync
Une fois que le composant Blazor a terminé l’exécution du SetParametersAsync
méthode et, par conséquent, tous les paramètres du composant parent sont définis, le OnInitialized
et OnInitializedAsync
les méthodes de cycle de vie sont appelées.
Le OnInitialized
et OnInitializedAsync
Les méthodes sont l’endroit idéal pour charger des données de la base de données et les attribuer aux propriétés utilisées dans le modèle du composant.
@code {
private string? message;
[Parameter]
public string Name { get; set; }
protected override void OnInitialized()
{
message = $"Welcome, {Name}!";
}
}
Comme le montre cet exemple, nous pouvons également utiliser les valeurs reçues comme paramètre de composant au sein du programme synchrone. OnInitialized
méthode du cycle de vie.
Le SetParametersAsync
n’est appelé que la première fois qu’un composant Blazor est rendu.
Cependant, le OnParametersSet
et OnParametersSetAsync
Les méthodes de cycle de vie sont déclenchées chaque fois que le composant parent est restitué, fournissant une valeur différente pour les paramètres d’un composant enfant.
Le remplacement de ces méthodes nous donne accès à la mise à jour des valeurs dans le composant en fonction d’un nouvel ensemble de paramètres.
@code {
private string? message;
[Parameter]
public string Name { get; set; }
protected override void OnParametersSet()
{
message = $"Welcome, {Name}!";
}
}
Après le OnParametersSet
ou OnParametersSetAsync
Les méthodes de cycle de vie sont terminées, un nouveau rendu automatique du composant est déclenché.
La méthode StateHasChanged
Nous pouvons appeler le StateHasChanged
méthode du ComponentBase
classe pour informer le composant Blazor que l’état du composant a changé.
Le StateHasChanged
La méthode déclenchera un nouveau rendu du composant, qui appellera toutes les méthodes de cycle de vie applicables pendant le processus de rendu.
Toutefois, vous ne devez pas appeler le StateHasChanged
méthode dans les scénarios suivants :
- Gestion des événements. Peu importe que les événements soient synchrones ou asynchrones. Le
ComponentBase
La classe déclenche un rendu pour la plupart des gestionnaires d’événements. - Implémentation de méthodes de cycle de vie tel que
OnParametersSetAsync
ouOnInitialized
(synchrone ou asynchrone). LeComponentBase
la classe déclenche un rendu pour la plupart des événements du cycle de vie.
En règle générale : Habituellement, vous n’avez pas besoin d’appeler le StateHasChanged
méthode manuellement. Cependant, si vous vous attendez à ce que l’interface utilisateur affiche une valeur mise à jour et que ce n’est pas le cas, il y a de fortes chances qu’un StateHasChanged
appeler au bon endroit résoudra votre problème.
En savoir plus sur les cas extrêmes où l’appel StateHasChanged
est nécessaire pour obtenir le comportement souhaité dans le Rendu des composants ASP.NET Core Razor Documentation.
Méthodes de cycle de vie asynchrones et synchrones
Pour le code synchrone, les composants parents sont toujours rendus avant les composants enfants.
Le code asynchrone devient plus compliqué. Lors de l’utilisation de méthodes de cycle de vie asynchrone, l’ordre d’achèvement d’un composant parent et enfant n’est pas déterministe car il repose sur le code d’initialisation.
Cependant, Blazor garantit que les paramètres du composant sont disponibles et correctement mis à jour lors du rendu d’un composant enfant.
Cela pose la question : Devriez-vous utiliser des méthodes de cycle de vie synchrones ou asynchrones implémenter les composants Blazor ?
Jusqu’à présent, j’ai préféré utiliser des méthodes de cycle de vie synchrones lorsque je n’ai pas besoin d’attendre des opérations asynchrones.
Chaque fois que j’ai besoin d’appeler la base de données ou d’utiliser d’autres opérations asynchrones, je dois utiliser les méthodes de rappel asynchrones. Cependant, si ce n’est pas le cas, j’utilise les méthodes de rappel synchrone les plus simples.
Conclusion
Utilisation des composants Blazor méthodes de cycle de vie pour empêcher le blocage de l’interface utilisateur et permettre aux développeurs d’exécuter du code personnalisé.
Le SetParametersAsync
La méthode permet l’exécution de code personnalisé gérant les paramètres fournis par le composant parent et n’est exécutée que pour le premier rendu d’un composant Blazor.
Le OnInitialized
et OnInitializedAsync
les méthodes de cycle de vie sont souvent utilisées pour charger des données à partir de la base de données ou pour initialiser les propriétés rendues dans le cadre du modèle du composant.
Le OnParametersSet
et OnParametersSetAsync
les méthodes de cycle de vie sont appelées chaque fois que le composant parent est restitué, fournissant un autre paramètre au composant enfant.
Si l’interface utilisateur n’affiche pas la valeur attendue à l’écran, vous risquez de manquer un StateHasChanged
appelez à l’endroit approprié dans votre code.
Il y a synchrone et asynchrone méthodes de cycle de vie. Utilisez la méthode adaptée à votre contexte. Commencez par synchrone et utilisez asynchrone si vous devez effectuer des opérations asynchrones telles que la lecture de données de la base de données ou l’appel d’une API distante.
Cet article résume et explique les principes fondamentaux de la gestion du cycle de vie des composants Blazor. Si vous souhaitez approfondir et apprendre les tenants et les aboutissants, vous trouverez plus d’informations dans le Documentation sur le cycle de vie de Blazor.
Source link