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 ou OnInitialized (synchrone ou asynchrone). Le ComponentBase 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.