Was ist Änderungserkennung? Lassen Sie uns über den Änderungsmechanismus von Angular sprechen

Was ist Änderungserkennung? Im folgenden Artikel geht es um den Änderungserkennungsmechanismus in Angular, es wird vorgestellt, wie Statusänderungen die Änderungserkennung benachrichtigen, und ich hoffe, dass er für alle hilfreich ist.

1. Was ist Änderungserkennung

• Zusammenfassung: Ein Änderungserkennungsmechanismus , der zum Durchlaufen des Komponentenbaums, zum Überprüfen von Änderungen in jeder Komponente und zum Erkennen von Änderungen in Komponenteneigenschaften beim Auslösen der Aktualisierung von verwendet wird DOM. [Verwandte Tutorial-Empfehlungen: „检测机制，用于遍历组件树，检查每个组件的变化，并在组件属性发生变化的时候触发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()：把脱离的检测器重新链接Angular Tutorial
“]

Grundlegende Aufgaben der Änderungserkennung: Ermitteln Sie den internen Status des Programms und machen Sie ihn in der Benutzeroberfläche sichtbar. Dieser Zustand kann ein beliebiges Objekt, Array oder Basisdatentyp sein.

🎜2. Was hat die Änderung verursacht? Ereignisgesteuert sind die Quellen die folgenden drei Kategorien: der Back-End-Server Zu Daten🎜🎜Timer: setTimeout(), setInterval()🎜🎜🎜Diese Punkte haben eines gemeinsam: Sie sind alle asynchron, also alle asynchrone Operationen Code> kann dazu führen, dass Daten die Hauptursache für Änderungen sind. Wenn also einige asynchrone Vorgänge ausgeführt werden, kann sich der Status unserer Anwendung ändern. Zu diesem Zeitpunkt muss die Ansicht aktualisiert werden 🎜🎜🎜 3. So benachrichtigen Sie die Statusänderungserkennung Änderungen 🎜🎜🎜 in <code>Angular ist mit NgZone verbunden, das alle asynchronen Ereignisse von Angular abhört, wenn es startet (bis Zone.js ) Teil der zugrunde liegenden Browser-API (fängt alle asynchronen Ereignisse gewaltsam ab). 🎜🎜Es gibt zwei gängige Methoden, um die Änderungserkennung auszulösen. Eine Methode basiert auf Komponentenlebenszyklus-Hooks. Die andere Methode besteht darin, das Öffnen oder Schließen der Änderungserkennung manuell zu steuern und sie manuell auszulösen Erkennung🎜🎜🎜Der Kern von Angular ist die Komponentisierung. Die Verschachtelung von Komponenten bildet schließlich einen Komponentenbaum, der in Komponenten unterteilt werden kann, und jede Komponente verfügt über einen entsprechenden Change DetectorChangeDetector ist es denkbar, dass diese Änderungsdetektoren auch einen Baum bilden. <br> In Angular verfügt jede Komponente über einen eigenen Änderungsdetektor, mit dem wir steuern können, wie und wann die Änderungserkennung für jede Komponente durchgeführt wird. 🎜🎜🎜4. Strategie zur Änderungserkennung🎜🎜🎜Angular bietet Entwicklern auch die Möglichkeit, Strategien zur Änderungserkennung anzupassen. 🎜🎜🎜Standard: <code>Jedes Mal führt die Änderungserkennung zu einer Änderungserkennung der Komponente, einschließlich Statusänderungen von anderen Komponenten und dieser Komponente-Referenzvariablen Interne Attributwertänderungen🎜🎜Onpush: Bei jeder Änderungserkennung wird die Änderungsprüfung dieser Komponente übersprungen, es sei denn einige Bedingungen sind erfüllt🎜🎜🎜🎜4.1 Standard 🎜🎜🎜Angulars standardmäßiger Änderungserkennungsmechanismus ist ChangeDetectionStrategy.Default. Nach dem Ende jedes asynchronen Ereignisrückrufs löst NgZone den gesamten Komponentenbaum aus. downÄnderungserkennung durchführen🎜🎜🎜4.2 <span style="font-size: 18px;">onPush</span> span>🎜🎜🎜OnPush-Strategie, die verwendet wird, um die Änderungserkennung einer bestimmten Komponente und aller Unterkomponenten darunter zu überspringen🎜🎜Tatsächlich OnPush-Strategie, es gibt immer noch viele Möglichkeiten, die Änderungserkennung auszulösen; 🎜🎜🎜1) Die Referenz des @Input-Attributs der Komponente ändert sich. 🎜🎜2) DOM-Ereignisse innerhalb der Komponente, einschließlich DOM-Ereignisse ihrer Unterkomponenten, wie z. B. Klick, Senden, Maus nach unten. 🎜🎜3) Observable in der Komponente abonniert Ereignisse und legt gleichzeitig die Async-Pipe fest. 🎜🎜4) Verwenden Sie manuell die Methoden ChangeDetectorRef.detectChanges(), ChangeDetectorRef.markForCheck(), ApplicationRef.tick() in der Komponente 🎜🎜🎜🎜 5. Ändern Sie die Erkennungsobjektreferenz 🎜🎜🎜🎜markForCheck () : Wird für Unterkomponenten verwendet, um den Pfad zwischen der Unterkomponente und der Stammkomponente zu markieren und dem Winkeldetektor beim nächsten Mal mitzuteilen, dass er sicherlich ist erkennt Änderungen. >Überprüfen Sie die Komponenten auf diesem Pfad, auch wenn die Änderungserkennungsstrategie auf onPush eingestellt ist 🎜🎜detectChanges(): Initiieren Sie manuell die Änderungserkennung von dieser Komponente zu jeder Unterkomponente🎜🎜detach(): <code>Den Detektor der Komponente trennen Er wird nicht mehr vom Erkennungsmechanismus gesteuert, es sei denn, er wird wieder angeschlossen. 🎜🎜reattach(): Den abgetrennten Detektor wieder anschließen Gehen Sie zum Detektorbaum🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWas ist Änderungserkennung? Lassen Sie uns über den Änderungsmechanismus von Angular sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!