Angular Development Practice (5): Eingehende Analyse der Änderungsüberwachung

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: 'demo-component',
  template: `
    <h1>{{name}}</h1>
    <button (click)="changeName()">change name</button>
  `
})
export class DemoComponent {
    name: string = &#39;Tom&#39;;
    
    changeName() {
        this.name = &#39;Jerry&#39;;
    }
}

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: 'demo-component',
  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;
        });
    }
}

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: 'demo-component',
  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);
    }
}

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: 'demo-child',
  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
}

Übergeordnete Komponente:

@Component({
  selector: 'demo-parent',
  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;;
    }
}

Im obigen Code übergibt DemoParentComponent 2d98474aedbe595bd04446b1aff352d7733dbcdb0cb52d6c005bb34feed27005 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 的实例，该实例提供了相关方法来手动管理变化监测。有了这个类，我们自己就可以自定义组件的变化监测策略了，如停止/启用变化监测或者按指定路径变化监测等等。

相关方法如下：

• markForCheck()：把根组件到该组件之间的这条路径标记起来，通知Angular在下次触发变化监测时必须检查这条路径上的组件。

• detach()：从变化监测树中分离变化监测器，该组件的变化监测器将不再执行变化监测，除非再次手动执行reattach()方法。

• reattach()：把分离的变化监测器重新安装上，使得该组件及其子组件都能执行变化监测。

• detectChanges()：手动触发执行该组件到各个子组件的一次变化监测。

使用方法也很简单，直接在组件中注入即可：

@Component({
  selector: 'demo-parent',
  template: `
    <h1>{{title}}</h1>
  `
})
export class DemoParentComponent implements OnInit {
    title: string = &#39;组件标题&#39;;
    
    constructor(public cdRef: ChangeDetectorRef) {}
    
    ngOnInit() {
        this.cdRef.detach(); // 停止组件的变化监测，看需求使用不同的方法
    }
}

相关推荐：

Angular开发实践（四）：组件之间的交互

Angular开发实践（二）：HRM运行机制

         

Das obige ist der detaillierte Inhalt vonAngular Development Practice (5): Eingehende Analyse der Änderungsüberwachung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!