Stratégie de détection des changements angulaires : stratégies OnPush et par défaut

La détection de changement est appelée le mécanisme qui compare l'état actuel à celui du nouvel état. Toute différence entre les deux états suggère qu'il y a des changements qui doivent être mis à jour. Cela signifie que la vue doit être mise à jour avec la modification des données.

Tout changement qui se produit dans les composants lors d'un changement dans l'application est détecté via Angular 2+. Chaque fois qu'un modèle est modifié, les modifications associées sont détectées par angular et les vues sont mises à jour immédiatement. Ce changement est appelé détection de changement angulaire.

La modification peut être le résultat de données reçues à partir de requêtes réseau ou se produire via un événement utilisateur. Avec la taille croissante de l'application, plus de travail doit être effectué par la méthode de détection des changements. La détection angulaire est nécessaire pour maintenir la synchronisation entre les vues sous-jacentes et les modèles correspondants.

La modification du modèle angulaire peut être due à l'une des raisons suivantes :

• Événements DOM (clic, survol, etc.)
• Requêtes AJAX
• Minuteries (setTimer(), setInterval())

Conditions préalables

Pour vous familiariser avec cet article, vous devrez peut-être vous familiariser avec les concepts de composants angulaires. En outre, les concepts de types de valeur et de types de référence peuvent être utiles pour comprendre l'article.

Détection de changement dans Angular

La détection de changement dans angular se fait en deux étapes, la première étant la mise à jour du modèle d'application via le développeur. Elle peut être précédée soit par l'émission d'un événement, soit par le changement de propriété d'un composant. La deuxième étape, c'est-à-dire le travail de l'angular de refléter le modèle. Il détecte si de nouvelles données sont explicitement poussées dans le composant. Cela peut être fait via un composant ou un Observable souscrit à l'aide du canal asynchrone.

Par conséquent, les deux étapes sont :

• Mettre à jour le modèle d'application (développeur);
• Reflète l'état du modèle dans la vue (angulaire).

La détection des modifications dans angular détecte les modifications des événements courants du navigateur, tels que les clics de souris, les requêtes HTTP et d'autres types d'événements. Une fois le changement détecté, il est alors décidé si la mise à jour de la vue est requise ou non.

Changer les stratégies de détection

Deux stratégies de détection de changement angulaire sont présentes, celle par défaut et onPush.

La stratégie par défaut

• Les changements sur un modèle sont surveillés par angular pour s'assurer que tous les changements dans le modèle sont capturés. Les différences entre le nouvel état et l'état précédent sont vérifiées par angular.
• Pour qu'une vue soit mise à jour, l'angle doit avoir accès à la nouvelle valeur qui est ensuite comparée à l'ancienne valeur. Sur cette base, la décision est prise de mettre à jour ou non la vue.
• Par conséquent, dans une stratégie par défaut, l'angle tourne autour de la question de savoir s'il y a des changements dans la valeur.
• Il n'y a aucune hypothèse quant à l'endroit où les composants dépendent. C'est une stratégie conservatrice qui vérifiera chaque fois qu'il y a un changement associé. Des vérifications seront effectuées sur tous les événements, heures, promesses et XHR du navigateur.
• La stratégie peut être problématique lorsque de grandes applications doivent être envisagées avec de nombreux composants.
• Par défaut, il utilise la stratégie ChangeDetectionStrategy.Default .

Remplacer les mécanismes par défaut du navigateur

• Plusieurs API de bas niveau seront corrigées par angular au démarrage. Ces API peuvent être addEventListener ; une fonction de navigateur utilisée pour enregistrer les événements de navigation.
• Le addEventListener sera remplacé par angular avec une version plus récente fonctionnant comme la version précédente.
• Plus de fonctionnalités sont ajoutées au gestionnaire d'événements par la nouvelle version de addEventListener . L'interface utilisateur est mise à jour après l'exécution de la vérification des performances par angular.

Travaillant

Une bibliothèque livrée avec Zone.js effectue le correctif de bas niveau de l'API du navigateur.

• La zone est définie comme le contenu d'exécution sous plusieurs tours d'exécution JVM. Des fonctionnalités supplémentaires peuvent être ajoutées à un navigateur via ce mécanisme. Les zones sont utilisées en interne par angular pour détecter tout changement et déclencher la détection.
• Il y a normalement trois phases dans une zone, c'est-à-dire qu'elle est stable au début, devient instable si une tâche s'exécute dans la zone, et elle devient stable une fois la tâche terminée.
• Les mécanismes de navigateur corrigés pour prendre en charge la détection des modifications sont :

1. les événements du navigateur tels que les clics, etc.
2. setInterval() et setTimeout()
3. Requêtes d'Ajax HTTP

• Pour déclencher la détection de changement dans angular, Zone.js est utilisé pour patcher plusieurs API d'un autre navigateur comme Websockets.
• Une limitation à cette méthode est la suivante : si Zone.js ne prend pas en charge l'API du navigateur, il n'y aura pas de déclencheur lors de la détection des modifications.

Comment fonctionne la détection de changement angulaire lorsque la détection de changement est déclenchée ?

Les changements déclenchés sont détectés par un détecteur de changement. Ce détecteur de changement est créé lors du démarrage de l'application. Un exemple du composant TodoItem peut être considéré. Un événement sera émis à la réception d'un objet Todo par le composant si le statut de la todo est basculé. En savoir plus sur la façon d'exécuter des projets angulaires.

Fonctionnement du mécanisme de détection de changement par défaut

Le mécanisme de détection des changements est simple. Dans chaque expression, la valeur actuelle de la propriété est comparée à la valeur de cette propriété dans l'état précédent de l'expression.

• Avoir une différence dans la valeur de la propriété définira la valeur sur true de isChanged .

2. Stratégie OnPush

• Lors de l'utilisation de la stratégie onPush , l'angle n'a pas besoin de deviner quand la vérification doit être effectuée.
• En fonction de la modification de la référence d'entrée ou des événements déclenchés par les composants eux-mêmes, l'angle effectuera la vérification des modifications.
• En outre, l'angle peut être explicitement demandé d'effectuer la vérification des modifications. Cela se fait via la méthode de componentRef.markForCheck().
• Les composantes de cette stratégie dépendront uniquement de ses apports. La stratégie de détection de changement ne sera effectuée que lorsque :

• Il y a un changement dans la référence d'entrée.
• Il y a des changements associés dans les composants du modèle ou de l'un de ses enfants.
• Lorsqu'une détection de changement explicite doit être effectuée.
• Lorsqu'un canal asynchrone dans la vue est utilisé.

• Par rapport à la stratégie par défaut, la stratégie onpush s'articule principalement autour de deux questions qui sont :

• Y a-t-il un changement dans le type de référence ?
• S'il y a des changements dans la référence du type de référence, y a-t-il des changements dans les valeurs de la mémoire de tas ?

• Cela évite les vérifications inutiles sur les composants et également sur les composants enfants.

Implémentation de la stratégie onPush pour un composant

Ce n'est que lorsqu'une nouvelle référence est transmise en tant que valeur @Input() qu'elle déclenche la détection de changement. Les valeurs peuvent être des types primitifs tels que des nombres, des booléens, une chaîne et une valeur nulle. Des tableaux et des objets peuvent également être utilisés. Les objets ou tableaux modifiés ne peuvent pas être utilisés pour déclencher la détection de changement sur un composant onPush car aucune nouvelle référence n'est créée pour eux. Par conséquent, un nouvel objet ou une référence de tableau doit être passé pour déclencher le détecteur détectant le changement.

Pour éviter les bogues dans la méthode des méthodes de détection de changement, l'application peut être construite en utilisant la détection de changement onPush partout grâce à l'utilisation d'objets et de listes immuables. La modification d'objets immuables peut se faire par la création d'une nouvelle référence d'objet et donc :

• Pour chaque changement, la détection de changement onPush est déclenchée.
• Une nouvelle référence d'objet est toujours créée, ce qui évite la cause des bogues.

Dans de tels cas, Immutable.js peut être utilisé car il contient des structures de données immuables pour les objets (Map) et les listes (List).

• L'ajout du paramètre changeDetection dans l'annotation du composant implémentera la stratégie onPush. Au lieu de passer de nouvelles références à chaque fois, le ChangeDetectorRef peut également être utilisé pour un contrôle complet.

ChangeDetectorRef.detectChanges()

• La méthode de détection de changement peut être attachée ou détachée manuellement avec des méthodes de détachement et de rattachement dans changeDetectorRef.

ChangeDetectorRef.detach() et Immuable.js

Lors de l'utilisation de la stratégie onPush pour la détection des changements , il est toujours judicieux d'appliquer l'immuabilité. Dans de tels cas, Immutable.js est utilisé.

Le immutable.js est une bibliothèque créée pour incorporer l'immuabilité dans JavaScript avec des structures de données immuables comme List, Stack et Map.

Pour ajouter Immutable.js dans les projets, la commande suivante doit être utilisée dans le terminal. En savoir plus sur les projets angulaires.

$ npm installer immuable –save

Pour importer les structures de données depuis Immutable.js, la commande suivante doit être utilisée. La commande montre l'importation uniquement des structures de données List et Map dans ce cas.

importe {Carte, Liste} depuis 'immuable'Un tableau peut également être utilisé.

De plus, si Immutable.js est utilisé, quelques inconvénients y sont associés.

• L'utilisation de l'API est un peu lourde.
• Les interfaces ne peuvent pas être implémentées dans le modèle de données car la bibliothèque Imutable.js ne prend en charge aucune interface.

Apprenez des cours de logiciels en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Sommaire

L'article vous a présenté le mécanisme de détection des changements et les stratégies. Angular effectuera la détection des modifications sur tous les composants par défaut. En outre, le ChangeDetectorRef peut être appliqué pour détecter les changements dans les nouvelles références lorsque les données sont mutées. La demande de développement angulaire ne cesse d'augmenter, ce qui se traduit par un salaire de développeur angulaire en Inde.

Si vous souhaitez en savoir plus sur la technologie logicielle, son développement et le mécanisme qui la sous-tend, vous pouvez consulter le cours Executive PG Program in Software Development - Specialization in Full Stack Development proposé par upGrad. Le cours de spécialisation est un programme en ligne de 23 semaines offrant plus de 300 études de cas pour améliorer vos connaissances et les outils disponibles et le langage de programmation pour améliorer vos compétences pratiques. Si vous avez d'autres questions concernant le cours, envoyez-nous un message. Notre équipe vous contactera.