Lassen Sie uns anhand von Beispielen über die Änderungserkennung in Angular sprechen

Dieser Artikel führt Sie durch die Änderungserkennung in Angular. Wir beginnen mit einem kleinen Beispiel und besprechen dann nach und nach die Änderungserkennung. Ich hoffe, dass es für alle hilfreich ist.

Die Änderungserkennung in Angular ist ein Mechanismus, der verwendet wird, um den Status der Benutzeroberfläche der Anwendung mit dem Status der Daten zu synchronisieren. Wenn die Anwendungslogik Komponentendaten ändert, ändern sich auch die an DOM-Eigenschaften in der Ansicht gebundenen Werte. Der Änderungsdetektor ist für die Aktualisierung der Ansicht verantwortlich, um das aktuelle Datenmodell widerzuspiegeln. [Empfohlene verwandte Tutorials: „angular Tutorial“]

Was Sie auf dem Papier lernen, ist oberflächlich, aber Sie wissen, dass Sie es tun müssen. Um den Lesern das Verständnis zu erleichtern, beginnt dieser Artikel mit einem kleinen Beispiel und wird dann Schritt für Schritt erweitert. Das Beispiel lautet wie folgt:

// app.component.ts
import { Component } from '@angular/core';
@Component({  selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'aa';
    handleClick() {
        this.title = 'bb';
    }}
// app.componnet.html
<div (click)="handleClick()">{{title}}</div>

Das Beispiel ist relativ einfach, das heißt, das Binden eines Klickereignisses an das Element div ändert den Wert der Variablen title, und auch die Darstellung der Schnittstelle wird entsprechend aktualisiert. Woher weiß das Framework, wann es eine Ansicht aktualisieren muss, und wie aktualisiert es die Ansicht? Finden wir es heraus. <code>div元素绑定了一个点击事件，点击该元素就会改变变量title的值，界面的显示也会随之更新。框架如何知道什么时候需要更新视图，以及如何更新视图的呢？我们来一探究竟。

当我们点击div元素时，handleClick函数会被执行。那么在 Angular 应用中该函数是如何被触发执行的呢？如果你看过我之前的关于zone.js介绍的文章就会知道，Angular 应用中点击事件已经被zone.js接管。基于此答案便显而易见，最开始肯定是被zone.js触发执行，但在这里我还们还要进一步分析直接调用关系进而层层展开。最靠近handleClick函数调用的是下面的代码：

function wrapListener(listenerFn, ...) {
    return function wrapListenerIn_markDirtyAndPreventDefault(e) {
        let result = executeListenerWithErrorHandling(listenerFn, ...);
    }
}

上述代码中listenerFn函数指向的便是handleClick，但它又是wrapListener函数的参数。示例中元素绑定点击事件，相关模板编译产物大概是这样：

function AppComponent_Template(rf, ctx) { 
    ...... 
    i0["ɵɵlistener"]("click", function AppComponent_Template_div_click_0_listener() {
    return ctx.handleClick();
    })
}

初次加载应用会依次执行renderView、然后执行executeTemplate，接着便触发了上述的模板函数，就这样元素的点击函数便一路传递到了listenerFn参数。到这里我们了解了，点击函数的触发源头是zone.js，真实的点击函数传递却是由 Angular 实现，那么zone.js和 Angular 是如何关联的呢？zone.js会为每个异步事件安排一个任务，结合本文示例来说，invokeTask便是由下面代码调用：

function forkInnerZoneWithAngularBehavior(zone) {
    zone._inner = zone._inner.fork({
    name: 'angular',
    properties: { 'isAngularZone': true },
    onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => {
        try {
            onEnter(zone);
            return delegate.invokeTask(target, task, ...);
        }
        finally {
            onLeave(zone);
        }
    }
    })
}

看到这里是不是就很熟悉了，因为在之前的zone.js介绍的文章里，便有类似的代码片段。而forkInnerZoneWithAngularBehavior函数又是由类 NgZone 的构造函数调用。至此我们引出了 Angular 变更检测的一个主角 NgZone，它是对zone.js的一个简单封装。

现在我们知道示例中点击函数是如何被执行的，那么函数执行了以后应用数据有变化了，视图又是如何及时更新的呢？我们还是回到上面提到的forkInnerZoneWithAngularBehavior函数中，try finally语句块中，执行了invokeTask函数最终还会执行onLeave(zone)函数。再往下分析就能看到onLeave函数最终调用了checkStable函数：

function checkStable(zone) {
    zone.onMicrotaskEmpty.emit(null);
}

相应地在类ApplicationRef构造函数中订阅了这个emit事件：

class ApplicationRef {
    /** @internal */
    constructor() {
        this._zone.onMicrotaskEmpty.subscribe({
            next: () => {
                this._zone.run(() => {
                    this.tick();
                });
            }        
        }); 
}

在订阅相关回调函数中，this.tick()是不是很眼熟呢？如果你看了我之前的关于 Angular 生命周期函数的文章，那么你肯定还会有印象，它是触发视图更新的关键调用。虽然在那篇生命周期介绍的文章中有讲过这个函数，但本文的重点是变更检测因此函数虽然相同但侧重点略有变化。this.tick相关调用顺序大概是这样：

this.tick() ->
view.detectChanges() -> 
renderComponentOrTemplate() ->
refreshView()

这里refreshView比较重要单独拿出来分析一下：

function refreshView(tView, lView, templateFn, context) {
    ......
    if (templateFn !== null) {
        // 关键代码1
        executeTemplate(tView, lView, templateFn, ...);  }
    ......
    if (components !== null) {
        // 关键代码2
        refreshChildComponents(lView, components);
    }
}

这个过程中refreshView函数会被调用二次，第一次进入的是关键代码2分支，然后依次调用如下函数重新进入refreshView函数：

refreshChildComponents() ->
refreshChildComponents() ->
refreshComponent() ->
refreshView()

第二次进入refreshView函数调用的便是关键代码1分支了，即执行的是：executeTemplate函数。而该函数最终执行的是模板编译产物中的AppComponent_Template函数：

function AppComponent_Template(rf, ctx) {
    if (rf & 1) {
        // 条件分支1
        i0["ɵɵelementStart"](0, "div", 0);
        i0["ɵɵlistener"]("click", function AppComponent_Template_div_click_0_listener() {
            return ctx.handleClick();
        });
        i0["ɵɵtext"](1);
        i0["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        // 条件分支2
        i0["ɵɵadvance"](1);
        i0["ɵɵtextInterpolate"](ctx.title);
    }
}

如果还有读者不清楚上述模板编译产物中的函数是怎么来的，建议阅读之前关于依赖注入原理讲解的文章，因篇幅限制不再赘述。此时AppComponent_Template函数执行的是条件分支2里的代码，ɵɵadvance函数作用是更新相关的索引值，以保证找到正确的元素。这里重点讲讲ɵɵtextInterpolate函数，它最终调用的是函数ɵɵtextInterpolate1

Wenn wir auf das Element div klicken, wird die Funktion handleClick ausgeführt. Wie wird diese Funktion in Angular-Anwendungen ausgelöst? Wenn Sie meinen vorherigen Artikel über die Einführung von zone.js gelesen haben, wissen Sie, dass das Klickereignis in Angular-Anwendungen von zone.js übernommen wurde. Basierend auf dieser Antwort ist es offensichtlich, dass die Ausführung zu Beginn durch zone.js ausgelöst werden muss, aber hier müssen wir die direkte Aufrufbeziehung weiter analysieren und Schicht für Schicht erweitern. Der Code, der dem Funktionsaufruf handleClick am nächsten kommt, ist der folgende Code: 🎜

function ɵɵtextInterpolate1(prefix, v0, suffix) {
    const lView = getLView();
    // 关键代码1
    const interpolated = interpolation1(lView, prefix, v0, suffix);
    if (interpolated !== NO_CHANGE) {
        // 关键代码2
        textBindingInternal(lView, getSelectedIndex(), interpolated);
    }
    return ɵɵtextInterpolate1;
}

🎜Die Funktion listenerFn im obigen Code zeigt auf handleClick, aber es sind Parameter der Funktion wrapListener. Im Beispiel ist das Element an ein Klickereignis gebunden und das zugehörige Vorlagenkompilierungsprodukt sieht ungefähr so ​​aus: 🎜

function bindingUpdated(lView, bindingIndex, value) {
    const oldValue = lView[bindingIndex];
    if (Object.is(oldValue, value)) {
        return false;
    }
    else {
        lView[bindingIndex] = value;
        return true;
    }
}

🎜 Wenn die Anwendung zum ersten Mal geladen wird, führt sie renderView nacheinander aus , und führen Sie dann executeTemplate aus und lösen Sie dann die obige Vorlagenfunktion aus, sodass die Klickfunktion des Elements vollständig an den Parameter listenerFn übergeben wird. An diesem Punkt verstehen wir, dass die Triggerquelle der Klickfunktion zone.js ist, die eigentliche Bereitstellung der Klickfunktion jedoch von Angular implementiert wird. Wie sind also zone.js und Winkelbezogen? Was ist mit? zone.js ordnet für jedes asynchrone Ereignis eine Aufgabe an. Basierend auf dem Beispiel in diesem Artikel wird invokeTask durch den folgenden Code aufgerufen: 🎜

function updateTextNode(renderer, rNode, value) {
    ngDevMode && ngDevMode.rendererSetText++;
    isProceduralRenderer(renderer) ? renderer.setValue(rNode, value) : rNode.textContent = value;
}

🎜Ist das richtig? ist sehr vertraut, da es im vorherigen Artikel, in dem zone.js vorgestellt wird, ähnliche Codeausschnitte gibt. Die Funktion forkInnerZoneWithAngularBehavior wird vom Konstruktor der Klasse NgZone aufgerufen. Bisher haben wir NgZone vorgestellt, einen Protagonisten der Angular-Änderungserkennung, der eine einfache Kapselung von zone.js ist. 🎜🎜Da wir nun wissen, wie die Klickfunktion im Beispiel ausgeführt wird, stellt sich die Frage, wie die Ansicht rechtzeitig aktualisiert werden kann, wenn sich die Anwendungsdaten nach der Ausführung der Funktion ändern. Kehren wir zur oben erwähnten Funktion forkInnerZoneWithAngularBehavior zurück. Im Anweisungsblock try Finally führt die Ausführung der Funktion invokeTask schließlich dazu, dass onLeave( Zone)Funktion. Eine weitere Analyse zeigt, dass die Funktion onLeave schließlich die Funktion checkStable aufruft: 🎜rrreee🎜 wird entsprechend im Konstruktor der Klasse ApplicationRef Dieser abonniert Ereignis ausgeben: 🎜rrreee🎜Kommt Ihnen this.tick() in der abonnementbezogenen Rückruffunktion bekannt vor? Wenn Sie meinen vorherigen Artikel über Angular-Lebenszyklusfunktionen gelesen haben, werden Sie definitiv den Eindruck haben, dass dies der Schlüsselaufruf zum Auslösen von Ansichtsaktualisierungen ist. Obwohl diese Funktion im Einführungsartikel zum Lebenszyklus erwähnt wurde, liegt der Schwerpunkt dieses Artikels auf der Änderungserkennung. Obwohl die Funktion dieselbe ist, hat sich der Fokus daher geringfügig geändert. this.tickDie zugehörige Aufrufsequenz sieht ungefähr so ​​aus: 🎜rrreee🎜Hier ist refreshView wichtiger und wird separat analysiert: 🎜rrreee🎜In diesem Prozess refreshView Die Funktion wird zweimal aufgerufen, wenn sie zum ersten Mal den Schlüsselcode 2-Zweig betritt, und dann werden die folgenden Funktionen aufgerufen, um die Funktion refreshView erneut aufzurufen: 🎜rrreee🎜The Zum zweiten Mal wird refreshView aufgerufen. Die Funktion ruft den Schlüsselcode 1-Zweig auf, dh die Funktion executeTemplate wird ausgeführt. Und was diese Funktion letztendlich ausführt, ist die Funktion AppComponent_Template im Template-Kompilierungsprodukt: 🎜rrreee🎜 Wenn es immer noch Leser gibt, die nicht sicher sind, woher die Funktionen im oben genannten Template-Kompilierungsprodukt kommen, wird es empfohlen Lesen Sie den vorherigen Artikel über das Prinzip der Abhängigkeitsinjektion. Der Erklärungsartikel wird aus Platzgründen nicht wiederholt. Zu diesem Zeitpunkt führt die Funktion AppComponent_Template den Code im bedingten Zweig 2 aus und die Funktion ɵɵadvance aktualisiert den relevanten Indexwert, um sicherzustellen, dass das richtige Element gefunden wird. Der Fokus liegt hier auf der Funktion ɵɵtextInterpolate, die letztendlich die Funktion ɵɵtextInterpolate1:🎜 aufruft

function ɵɵtextInterpolate1(prefix, v0, suffix) {
    const lView = getLView();
    // 关键代码1
    const interpolated = interpolation1(lView, prefix, v0, suffix);
    if (interpolated !== NO_CHANGE) {
        // 关键代码2
        textBindingInternal(lView, getSelectedIndex(), interpolated);
    }
    return ɵɵtextInterpolate1;
}

值得指出的是，该函数名末尾是数字1，这是因为还有类似的ɵɵtextInterpolate2、ɵɵtextInterpolate3等等，Angular 内部根据插值表达式的数量调用不同的专用函数，本文示例中文本节点的插值表达式数量为1，因此实际调用的是ɵɵtextInterpolate1函数。该函数主要做了两件事，关键代码1作用是比较插值表达式值有没有更新，关键代码2则是更新文本节点的值。先来看看关键代码1的函数interpolation1，它最终调用的是：

function bindingUpdated(lView, bindingIndex, value) {
    const oldValue = lView[bindingIndex];
    if (Object.is(oldValue, value)) {
        return false;
    }
    else {
        lView[bindingIndex] = value;
        return true;
    }
}

变更检测前的文本节点值称之为oldValue, 该值存储在lView中，lView我在之前的文章中也提到过，忘记了的读者可以去看看lView的作用。bindingUpdated首先会比较新值和旧值，比较的方法便是Object.is。如果新值旧值没有变化，则返回false。如果有变化，则更新lView中存储的值，并返回true。关键代码2的函数textBindingInternal最终调用的是下述函数：

function updateTextNode(renderer, rNode, value) {
    ngDevMode && ngDevMode.rendererSetText++;
    isProceduralRenderer(renderer) ? renderer.setValue(rNode, value) : rNode.textContent = value;
}

走完上述流程，我们点击div元素时，界面显示内容便会由aa变为bb,即完成了从应用数据的变更到 UI 状态的同步更新，这便是 Angular 最基本的变更检测过程了。

因篇幅限制，本文所举示例比较简单，但 Angular 的变更检测还有很多没有讲到。比如，如果应用是由若干个组件组成的，父子组件间的变更检测如何进行，以及如何通过策略优化变更检测等等。如果有对这方面感兴趣的朋友，欢迎关注我的个人公众号【朱玉洁的博客】，后续将在那里分享更多前端知识。

更多编程相关知识，请访问：编程学习！！

Das obige ist der detaillierte Inhalt vonLassen Sie uns anhand von Beispielen über die Änderungserkennung in Angular sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!