Angular Development Practice (5): Eingehende Analyse der Änderungsüberwachung-js-Tutorial-php.cn

Was ist Änderungsüberwachung?

Bei der Entwicklung mit Angular verwenden wir häufig die Bindung in Angular – Eingabebindung von Modell zu Ansicht, Ausgabebindung von Ansicht zu Modell und Bindung zwischen Ansicht und Modell. Zwei-Wege-Bindung. Der Grund, warum diese Grenzwerte zwischen der Ansicht und dem Modell synchronisiert werden können, liegt in der Änderungserkennung in Angular.

Um es einfach auszudrücken: Die Änderungserkennung wird von Angular verwendet, um zu erkennen, ob sich die zwischen der Ansicht und dem Modell gebundenen Werte geändert haben. Es wird mit der Ansicht synchronisiert. Wenn dagegen festgestellt wird, dass sich der gebundene Wert in der Ansicht ändert, wird die entsprechende Bindungsfunktion zurückgerufen.

Die Quelle der Änderungsüberwachung

Der Schlüssel zur Änderungsüberwachung besteht darin, zu überwachen, ob sich die Grenzwerte auf kleinster Ebene geändert haben und unter welchen Umständen diese Grenzwerte auftreten Wolltuch wechseln? Wir können uns mehrere häufig verwendete Szenarien ansehen:

Ereignisse: Klicken/Hover/...

@Component({
  selector: &#39;demo-component&#39;,
  template: `
    <h1>{{name}}</h1>
    <button (click)="changeName()">change name</button>
  `
})
export class DemoComponent {
    name: string = &#39;Tom&#39;;
    
    changeName() {
        this.name = &#39;Jerry&#39;;
    }
}

Nach dem Login kopieren

Wir binden das Namensattribut in der Vorlage durch Interpolationsausdrücke. Wenn auf change name按钮 geklickt wird, wird der Wert des Namensattributs geändert und der in der Vorlagenansicht angezeigte Inhalt ändert sich ebenfalls.

XHR/webSocket

@Component({
  selector: &#39;demo-component&#39;,
  template: `
    <h1>{{name}}</h1>
  `
})
export class DemoComponent implements OnInit {
    name: string = &#39;Tom&#39;;
    
    constructor(public http: HttpClient) {}
    
    ngOnInit() {
        // 假设有这个./getNewName请求，返回一个新值&#39;Jerry&#39;
        this.http.get(&#39;./getNewName&#39;).subscribe((data: string) => {
            this.name = data;
        });
    }
}

Nach dem Login kopieren

Wir haben in der ngOnInit-Funktion dieser Komponente eine Ajax-Anfrage an den Server gesendet. Wenn diese Anfrage das Ergebnis zurückgibt, ändert sie auch die Bindung auf der aktuellen Vorlagenansicht. Der Wert des angegebenen Namensattributs.

Zeiten: setTimeout/requestAnimationFrame

@Component({
  selector: &#39;demo-component&#39;,
  template: `
    <h1>{{name}}</h1>
  `
})
export class DemoComponent implements OnInit {
    name: string = &#39;Tom&#39;;
    
    constructor() {}
    
    ngOnInit() {
        // 假设有这个./getNewName请求，返回一个新值&#39;Jerry&#39;
        setTimeout(() => {
            this.name = &#39;Jerry&#39;;
        }, 1000);
    }
}

Nach dem Login kopieren

Wir legen eine geplante Aufgabe in der ngOnInit-Funktion dieser Komponente fest. Wenn die geplante Aufgabe ausgeführt wird, ändert sie auch die Bindung für die aktuelle Ansicht . Der Wert des Namensattributs.

Zusammenfassung

Tatsächlich ist es nicht schwer festzustellen, dass die oben genannten drei Situationen eines gemeinsam haben, nämlich diese Ereignisse, die den verbindlichen Wert verursachen Änderungen erfolgen alle asynchron.
Angular erfasst keine Änderungen an Objekten. Es verwendet das entsprechende Timing, um zu überprüfen, ob sich der Wert des Objekts geändert hat. Dieses Timing ist das Auftreten dieser asynchronen Ereignisse.
Dieses Timing wird vom NgZone-Dienst gesteuert. Er ruft den Ausführungskontext der gesamten Anwendung ab und kann das Auftreten, den Abschluss oder die Ausnahme verwandter asynchroner Ereignisse erfassen und dann die Angular-Implementierung steuern Änderungsüberwachungsmechanismus.

Verarbeitungsmechanismus für die Änderungsüberwachung

Durch die obige Einführung verstehen wir ungefähr, wie die Änderungserkennung ausgelöst wird und wie dann die Änderungsüberwachung in Angular durchgeführt wird. Wolltuch?

Zunächst müssen wir wissen, dass es für jede Komponente einen entsprechenden Änderungsmonitor gibt, das heißt, jede Komponente entspricht einem changeDetector, den wir durch Abhängigkeitsinjektion in der Komponente erhalten können . changeDetector.

Und unsere mehreren Komponenten sind in einer Baumstruktur organisiert. Da eine Komponente einem changeDetector entspricht, sind auch die changeDetectors in einer Baumstruktur organisiert.

Das Letzte, woran wir denken müssen, ist, dass jede Änderungserkennung an der Wurzel des Komponentenbaums beginnt.

Zum Beispiel

Untergeordnete Komponente:

@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <h1>{{title}}</h1>
    <p>{{paramOne}}</p>
    <p>{{paramTwo}}</p>
  `
})
export class DemoChildComponent {
    title: string = &#39;子组件标题&#39;;
    @Input() paramOne: any; // 输入属性1
    @Input() paramTwo: any; // 输入属性2
}

Nach dem Login kopieren

Übergeordnete Komponente:

@Component({
  selector: &#39;demo-parent&#39;,
  template: `
    <h1>{{title}}</h1>
    <demo-child [paramOne]=&#39;paramOneVal&#39; [paramTwo]=&#39;paramTwoVal&#39;></demo-child>
    <button (click)="changeVal()">change name</button>
  `
})
export class DemoParentComponent {
    title: string = &#39;父组件标题&#39;;
    paramOneVal: any = &#39;传递给paramOne的数据&#39;;
    paramTwoVal: any = &#39;传递给paramTwo的数据&#39;;
    
    changeVal() {
        this.paramOneVal = &#39;改变之后的传递给paramOne的数据&#39;;
    }
}

Nach dem Login kopieren

Im obigen Code übergibt DemoParentComponent ist in DemoChildComponent eingebettet. Aus Sicht der Baumstruktur ist DemoParentComponent der Stammknoten von DemoChildComponent und DemoChildComponent der Blattknoten von DemoParentComponent.

Wenn wir auf die Schaltfläche von DemoParentComponent klicken, wird die Methode „changeVal“ zurückgerufen und dann die Ausführung der Änderungsüberwachung ausgelöst. Der Änderungsüberwachungsprozess ist wie folgt:

Zuerst beginnt die Änderungserkennung bei DemoParentComponent Start:

Erkennen Sie, ob sich der Titelwert geändert hat: Es ist keine Änderung aufgetreten
Erkennen Sie, ob sich der paramOneVal-Wert geändert hat: Es hat eine Änderung stattgefunden (klicken Sie auf die Schaltfläche, um die zu ändernde Methode changeVal() aufzurufen)
Erkennen Sie, ob sich der paramTwoVal-Wert geändert hat: Es ist keine Änderung aufgetreten

Dann tritt die Änderungserkennung in den Blattknoten DemoChildComponent ein:

Erkennen Sie, ob sich der Titelwert geändert hat: Es ist keine Änderung aufgetreten
Erkennen Sie, ob sich paramOne geändert hat: Es hat sich geändert (aufgrund von Das Attribut paramOneVal der übergeordneten Komponente hat sich geändert)
Erkennen Sie, ob sich paramTwo geändert hat: keine Änderung ist aufgetreten

Schließlich, weil DemoChildComponent nicht mehr vorhanden ist Es gibt Blattknoten, sodass die Änderungsüberwachung das DOM aktualisiert und Änderungen zwischen der Ansicht und dem Modell synchronisiert.

Änderungsüberwachungsstrategie

Nachdem Sie den Verarbeitungsmechanismus der Änderungsüberwachung kennengelernt haben, denken Sie vielleicht, dass dieser Mechanismus etwas zu einfach und grob ist. Wenn meine Anwendung Hunderte oder Tausende von Dateien enthält. Wenn eine Komponente eine Überwachung auslöst, muss sie vom Wurzelknoten bis zum Blattknoten erneut erkannt werden.

Keine Sorge, das Entwicklungsteam von Angular hat dieses Problem bereits berücksichtigt. Angular bietet auch einen OnPush-Erkennungsmechanismus (stellen Sie das Metadatenattribut „changeDetection“ ein: ChangeDetectionStrategy.OnPush). ).

OnPush 与 Default 之间的差别：当检测到与子组件输入绑定的值没有发生改变时，变化检测就不会深入到子组件中去。

变化监测类 - ChangeDetectorRef

上面说到我们可以修改组件元数据属性 changeDetection 来修改组件的变化监测策略（ChangeDetectionStrategy.Default 或 ChangeDetectionStrategy.OnPush），除了这个，我们还可以使用 ChangeDetectorRef 来更加灵活的控制组件的变化监测。

Angular 在整个运行期间都会为每一个组件创建 ChangeDetectorRef 的实例，该实例提供了相关方法来手动管理变化监测。有了这个类，我们自己就可以自定义组件的变化监测策略了，如停止/启用变化监测或者按指定路径变化监测等等。