Compréhension approfondie du flux de données unidirectionnel dans Angular

Cet article vous présente principalement la compréhension approfondie du flux de données unidirectionnel dans Angular. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. peut suivre Apprenons ensemble.

Détection de changement

Dans Angular, les données circulent du nœud racine supérieur au dernier nœud feuille, et l'intégralité du flux de données est à sens unique, formant un arbre à sens unique.

Angular estime que toutes les opérations asynchrones peuvent entraîner des modifications dans le modèle. Les sources d'événements qui provoquent des modifications dans le modèle de données sont :

• <.>Événements : clic, survol de la souris, saisie au clavier...

• Timers : setInterval, setTimeout

• XHR : Ajax(GET, POST.. .)

Angular encapsule Zone pour intercepter et suivre le comportement asynchrone. Une fois le comportement asynchrone découvert, Angular effectuera la détection des changements.

Le flux de données étant unidirectionnel, la source de données du composant ne peut être transmise qu'à partir du composant parent, donc Angular traversera le composant de détection de haut en bas, tant que le Le composant parent est détecté. Continuez à détecter les sous-composants. Par rapport à angulairejs, la direction du flux de données bidirectionnel et chaotique entraînera la répétition de la détection des changements plusieurs fois jusqu'à ce que les données soient stables, ce qui peut entraîner des problèmes de performances, ou les données et la vue seront dans un état incohérent, c'est-à-dire la vue une fois le processus de rendu terminé ne peut pas refléter l'état réel des données.

Sortie rendue

Lorsqu'un changement de modèle de données est détecté et que le composant doit être restitué, Angular exécutera sa fonction de génération DOM, qui génère une nouvelle structure de données DOM correspondant à la nouvelle version du composant View.

Angular Pendant le processus de rendu, les expressions de modèle sont évaluées et les hooks de cycle de vie sont appelés tout au long de l'arborescence des composants.

Remarque : Le drapeau vert sera appelé plusieurs fois

Du point de vue de cycle d'appel de vie (ligne dirigée vers la verte), ngAfterViewChecked indique que la sortie de la vue des composants et des sous-composants est terminée. Regardez l'exemple suivant :

import {Component, AfterViewChecked} from '@angular/core';
import {Course} from "./course";
@Component({
 selector: 'app-root',
 template: `
 <p class="course">
  <span class="description">{{course.description}}</span>
 </p>
`})
export class AppComponent implements AfterViewChecked {
 course: Course = {
  id: 1,
  description: "Angular For Beginners"
 };

 ngAfterViewChecked() {
  this.course.description += Math.random();
 }
}

Le code ci-dessus provoquera une erreur pendant le cycle de détection de changement angulaire. Le composant a terminé la sortie de la structure de données DOM et nous avons également modifié l'état des données dans la méthode ngAfterViewChecked() du composant. Cela entraîne une incohérence des données avec l'état d'affichage une fois la vue rendue.

Les données circulent des classes de composants vers les structures de données DOM qui les représentent, et l'acte de générer ces structures de données DOM ne conduit pas en lui-même à une modification supplémentaire des données. Mais nous modifions les données dans le cycle de vie de ngAfterView. La règle de « flux de données unidirectionnel » d'Angular interdit la mise à jour d'une vue une fois qu'elle a été composée.

Cela signifie que le processus allant du modèle de données à la vue est unidirectionnel et que le flux de données ne peut pas être modifié après la vue.

Résumé

Du processus de détection des changements et du processus de sortie du rendu, on peut conclure :

Le flux de données unidirectionnel fait référence au flux de données d'application du haut de l'arborescence des composants vers le bas du processus d'analyse de rendu jusqu'à la structure de données DOM de sortie générée par le processus de rendu.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Exemple d'utilisation de Vue.js et Flask pour créer une application d'une seule page

Supprimer vue Deux méthodes de détection de spécification de code dans

Le projet Vue désactive la vérification eslint

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!