Comment optimiser le code angulaire

Cette fois, je vais vous montrer comment optimiser le code Angular et quelles sont les précautions à prendre pour optimiser le code Angular. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Résumé

La détection de valeurs sales dans Angular 4 est un vieux sujet, et la compréhension de ce modèle est la base de l'optimisation des performances angulaires. Par conséquent, aujourd'hui, nous parlerons du principe de détection des valeurs sales dans Angular 4 et examinerons quelques conseils pour optimiser les performances.

Point d'entrée - Zone.js

Angular 4 est un framework MVVM. Une fois le modèle de données (Model) converti en modèle de vue (ViewModel), il est lié à la vue (View) et rendu dans une page visible à l'œil nu. Par conséquent, découvrir le moment où le modèle de données change est la clé pour mettre à jour la page et appeler la détection de valeurs sales.

Après analyse, les ingénieurs ont découvert que les modifications des données sont souvent causées par des événements asynchrones tels que les macrotâches et les microtâches. Par conséquent, en réécrivant toutes les API asynchrones dans le navigateur, les modifications des données peuvent être efficacement surveillées depuis la source. Zone.js est un tel script singe (Monkey Patch). Angular 4 utilise une zone personnalisée (NgZone), qui informe Angular qu'il peut y avoir des changements de données et qu'il doit mettre à jour les données dans la vue (détection de valeurs sales).

Détection de valeur sale (Détection de changement)

Le principe de base de la détection de valeur sale est de stocker l'ancienne valeur et, lors de la détection, de comparer la nouvelle valeur à la valeur actuelle moment avec l'ancienne valeur Comparaison de valeurs. S'ils sont égaux, il n'y a pas de changement. Sinon, un changement est détecté et la vue doit être mise à jour.

Angular 4 divise la page en plusieurs composants pour former une arborescence de composants. Après avoir entré la détection des valeurs sales, la détection est effectuée de haut en bas à partir du composant racine. Angular a deux stratégies : Default et OnPush. Ils sont configurés sur le composant et déterminent différents comportements lors de la détection de valeurs sales.

Default - Stratégie par défaut

ChangeDetectionStrategy.Default. Cela signifie également que ce composant est toujours testé dès qu'un événement susceptible de modifier les données se produit.

L'opération de détection des valeurs sales peut essentiellement être comprise comme les étapes suivantes. 1) Mettre à jour les propriétés liées au sous-composant, 2) Appeler les hooks de cycle de vie NgDoCheck et NgOnChanges du sous-composant, 3) Mettre à jour son propre DOM, 4) Détecter la valeur sale du sous-composant. Il s'agit d'une équation récursive partant de la composante racine.

// This is not Angular code
function changeDetection(component) {
 updateProperties(component.children);
 component.children.forEach(child => {
  child.NgDoCheck();
  child.NgOnChanges();
 };
 updateDom(component);
 component.children.forEach(child => changeDetection(child));
}

Nous, les développeurs, accorderons une grande attention à l'ordre des mises à jour du DOM et à l'ordre d'appel de NgDoCheck et NgOnChanges. On peut le trouver :

1. Les mises à jour DOM sont axées d'abord sur la profondeur

2. NgDoCheck et NgOnChanges ne le sont pas (et ne sont pas non plus sur la profondeur)

OnPush - stratégie de détection unique

ChangeDetectionStrategy.OnPush. Ce composant n'est détecté que lorsque les propriétés d'entrée changent (OnPush). Par conséquent, lorsque l’entrée ne change pas, elle n’est détectée que lors de l’initialisation, également appelée détection unique. Son autre comportement est cohérent avec Default.

Il est à noter qu'OnPush ne détecte que les références à Input. Les modifications de propriété de l’objet Input ne déclencheront pas la détection de valeurs sales du composant actuel.

Bien que la stratégie OnPush améliore les performances, elle est également un point chaud pour les bugs. La solution consiste souvent à convertir l'entrée en forme immuable et à forcer la référence de l'entrée à changer.

Conseils

Liaison de données

Angular dispose de 3 méthodes légales de liaison de données, mais leurs performances ne sont pas les mêmes.

Lier les données directement

<ul>
 <li *ngFor="let item of arr">
  <span>Name {{item.name}}</span>
  <span>Classes {{item.classes}}</span><!-- Binding a data directly. -->
 </li>
</ul>

Dans la plupart des cas, c'est la meilleure façon de procéder.

Lier un résultat d'appel de fonction

<ul>
 <li *ngFor="let item of arr">
  <span>Name {{item.name}}</span>
  <span>Classes {{classes(item)}}</span><!-- Binding an attribute to a method. The classes would be called in every change detection cycle -->
 </li>
</ul>

Au cours de chaque processus de détection de valeur sale, l'équation des classes doit être appelée une fois. Imaginez que l'utilisateur fait défiler la page, que plusieurs macrotâches sont générées et que chaque macrotâche effectue au moins une vérification de valeur sale. S’il n’y a pas de besoins particuliers, cette méthode d’utilisation doit être évitée autant que possible.

Lier données+pipe

<ul>
 <li *ngFor="let item of instructorList">
  <span>Name {{item.name}}</span>
  <span>Classes {{item | classPipe}}</span><!-- Binding data with a pipe -->
 </li>
</ul>

C'est similaire à la fonction de liaison à chaque fois que la classe de détection de valeur salePipe est appelée. Cependant, Angular a optimisé le canal et ajouté une mise en cache. Si l'élément est égal à la dernière fois, le résultat sera renvoyé directement.

NgFor

Dans la plupart des cas, NgFor doit être utilisé avec l'équation trackBy. Sinon, NgFor mettra à jour le DOM pour chaque élément de la liste lors de chaque processus de détection de valeur sale.

@Component({
 selector: 'my-app',
 template: `
  <ul>
   <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
  </ul>
  <button (click)="getItems()">Refresh items</button>
 `,
})
export class App {
 collection;
 constructor() {
  this.collection = [{id: 1}, {id: 2}, {id: 3}];
 }
  
 getItems() {
  this.collection = this.getItemsFromServer();
 }
  
 getItemsFromServer() {
  return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
 }
  
 trackByFn(index, item) {
  return index;
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment séparer les données de configuration du code

Comment détecter les attributs dans le développement Web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!