Qu’est-ce que la détection des changements ? Parlons du mécanisme de changement d'Angular

Qu'est-ce que la détection des changements ? L'article suivant parlera du mécanisme de détection des changements dans Angular, présentera comment les changements de statut notifient la détection des changements et la stratégie de détection des changements angulaires. J'espère qu'il sera utile à tout le monde.

1. Qu'est-ce que la détection des changements

• Résumé : Un mécanisme de détection des changements utilisé pour parcourir l'arborescence des composants, vérifier les modifications dans chaque composant et détecter les modifications dans les propriétés des composants Lors du déclenchement de la mise à jour de DOM. [Recommandations du didacticiel associé : "检测机制，用于遍历组件树，检查每个组件的变化，并在组件属性发生变化的时候触发DOM的更新。【相关教程推荐：《angular教程》】
• 变更检测的基本任务： 获得程序的内部状态并使之在用户界面可见。这个状态可以是任何的对象、数组、基本数据类型。

二、什么引起了变更

事件驱动，来源有以下三大类:

• 事件：页面 click、submit、mouse down……
• XHR：从后端服务器拿到数据
• Timers：setTimeout()、setInterval()

这几点有一个共同点，就是它们都是异步的，也就是说，所有的异步操作是可能导致数据变化的根源因素，所以每当执行一些异步操作时，我们的应用程序状态可能发生改变，而这时则需要去更新视图

三、状态变化怎么通知变更检测

在Angular当中则接入了NgZone，由它来监听Angular所有的异步事件，Angular 在启动时会重写（通过 Zone.js）部分底层浏览器 API（暴力的拦截了所有的异步事件）。

常见的有两种方式来触发变化检测，一种方法是基于组件的生命周期钩子

ngAfterViewChecked() {
    console.log('cluster-master.component cd');
  }

另一种方法是手动控制变化检测的打开或者关闭，并手动触发

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

三、Angular 变更检测

Angular 的核心是组件化，组件的嵌套会使得最终形成一棵组件树，Angular 的变化检测可以分组件进行，每个组件都有对应的变化检测器 ChangeDetector，可想而知这些变化检测器也会构成一棵树。
在 Angular 中每个组件都有自己的变化检测器，这使得我们可以对每个组件分别控制如何以及何时进行变更检测。

四、变更检测策略

Angular还让开发者拥有定制变化检测策略的能力。

• default: 每次变更检测都会引起组件的变更检测，包括其他组件的状态变化，以及本组件引用型变量内部属性值变化
• Onpush: 每次变更检测会跳过本组件的变更检查，除非满足一些条件

4.1 default

Angular 默认的变化检测机制是 ChangeDetectionStrategy.Default，每次异步事件 callback 结束后，NgZone会触发整个组件树 至上而下做变化检测

4.2 <span style="font-size: 18px;">onPush</span>

OnPush 策略，用以跳过某个 component 以及它下面所有子组件的变化检测

其实在设置了 OnPush 策略以后，还是有许多方法可以触发变更检测的；

• 1）组件的 @Input 属性的引用发生变化。
• 2）组件内的 DOM 事件，包括它子组件的 DOM 事件，比如 click、submit、mouse down。
• 3）组件内的 Observable 订阅事件，同时设置 Async pipe。
• 4）组件内手动使用 ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() 方法

五、变化检测对象引用

• markForCheck()：使用于子组件，将该子组件到根组件之间的路径标记起来，通知 angular 检测器下次变化检测时一定检查此路径上的组件，即使设置了变化检测策略为 onPush
• detectChanges()：手动发起该组件到各个子组件的变更检测
• detach()：将组件的检测器从检测器数中脱离，不再受检测机制的控制，除非重新 attach 上
• reattach()：把脱离的检测器重新链接tutoriel angulaire
"]

Tâches de base de détection de changement : Obtenez le statut interne du programme et rendez-le visible dans l'interface utilisateur. Cet état peut être n’importe quel objet, tableau ou type de données de base.

🎜2. Qu'est-ce qui a causé le changement🎜🎜🎜Basées sur les événements, les sources sont les trois catégories suivantes :
🎜🎜🎜Événements : clic sur la page, soumission, souris enfoncée...🎜🎜XHR : extrait de le serveur back-end Vers les données 🎜🎜Timers : setTimeout(), setInterval()🎜🎜🎜 Ces points ont une chose en commun, c'est qu'ils sont tous asynchrones, c'est-à-dire toutes les opérations asynchrones code> peut provoquer des données La cause première du changement, donc chaque fois que certaines opérations asynchrones sont effectuées, l'état de notre application peut changer, et à ce moment, la vue doit être mise à jour 🎜🎜🎜 3. Comment notifier la détection de changement d'état changes 🎜🎜🎜 dans <code>Angular est connecté à NgZone, qui écoute tous les événements asynchrones d'Angular et le réécrira au démarrage (via <. code>Zone.js ) Une partie de l'API du navigateur sous-jacente (intercepte violemment tous les événements asynchrones). 🎜🎜Il existe deux manières courantes de déclencher la détection de changement. Une méthode est basée sur les hooks du cycle de vie des composants🎜rrreee🎜L'autre méthode consiste à contrôler manuellement l'ouverture ou la fermeture de la détection de changement et à la déclencher manuellement🎜rrreee🎜🎜3. détection🎜🎜🎜Le cœur d'Angular est la composantisation. L'imbrication des composants finira par former un arbre de composants. La détection des changements d'Angular peut être divisée en composants, et chaque composant a un Change DetectorChangeDetector, il est concevable que ces détecteurs de changements forment également un arbre. <br> Dans Angular, chaque composant possède son propre détecteur de changement, ce qui nous permet de contrôler comment et quand la détection de changement est effectuée pour chaque composant. 🎜🎜🎜4. Stratégie de détection des changements🎜🎜🎜Angular donne également aux développeurs la possibilité de personnaliser les stratégies de détection des changements. 🎜🎜🎜par défaut : <code>À chaque fois la détection de changement entraînera la détection de changement du composant, y compris les changements d'état des autres composants et des variables de référence de ce composant Modifications de la valeur d'attribut interne🎜🎜Sur poussée : chaque détection de changement ignorera la vérification des modifications de ce composant à moins que certaines conditions ne soient remplies🎜🎜🎜🎜4.1 par défaut 🎜🎜🎜Le mécanisme de détection des changements par défaut d'Angular est ChangeDetectionStrategy.Default Après la fin de chaque rappel d'événement asynchrone, NgZone déclenchera l'arborescence entière des composants Top-. downDétection des changements🎜🎜🎜4.2 <span style="font-size: 18px;">onPush</span> span>🎜🎜🎜Stratégie OnPush, utilisée pour ignorer la détection de changement d'un certain composant et de tous les sous-composants en dessous🎜🎜En fait, OnPush, il existe encore de nombreuses façons de déclencher la détection de changement 🎜🎜🎜1) La référence de l'attribut @Input du composant change ; 🎜🎜2) Événements DOM au sein du composant, y compris les événements DOM de ses sous-composants, tels que cliquez, soumettez, appuyez sur la souris. 🎜🎜3) Observable dans le composant s'abonne aux événements et définit le Async pipe en même temps. 🎜🎜4) Utilisez manuellement les méthodes ChangeDetectorRef.detectChanges(), ChangeDetectorRef.markForCheck(), ApplicationRef.tick() dans le composant 🎜🎜🎜🎜 5. Changer la référence de l'objet de détection 🎜🎜🎜🎜markForCheck () : Utilisé pour les sous-composants pour marquer le chemin entre le sous-composant et le composant racine, et notifier au détecteur angulaire de certainement lors du prochain changement détection >Vérifiez les composants sur ce chemin, même si la stratégie de détection des changements est définie sur onPush🎜🎜detectChanges() : lancez manuellement la détection des changements de ce composant vers chaque sous-composant🎜🎜detach() : Détachez le détecteur du composant du nombre de détecteurs. Il n'est plus contrôlé par le mécanisme de détection à moins d'être reconnecté. 🎜🎜reattach() : Reconnectez le détecteur détaché <.>Accédez à l'arborescence des détecteurs🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜</.>

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!