Parlons de la détection des changements dans Angular à travers des exemples

Cet article vous présentera la détection des changements dans Angular. Nous commencerons par un petit exemple, puis discuterons progressivement de la détection des changements en profondeur. J'espère que cela sera utile à tout le monde !

La détection de changement dans Angular est un mécanisme utilisé pour synchroniser l'état de l'interface utilisateur de l'application avec l'état des données. Lorsque la logique de l'application modifie les données des composants, les valeurs liées aux propriétés DOM dans la vue changent également. Le détecteur de changement est chargé de mettre à jour la vue pour refléter le modèle de données actuel. [Tutoriels associés recommandés : "Tutoriel angulaire"]

Ce que vous apprenez sur papier est superficiel, mais vous savez que vous devez le faire. Afin de faciliter la compréhension des lecteurs, cet article commence par un petit exemple puis se développe étape par étape. L'exemple est le suivant :

// 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>

L'exemple est relativement simple, c'est-à-dire lier un événement click à l'élément div. Cliquer sur l'élément modifiera la valeur de la variable title<.>, et l'affichage de l'interface changera également. Sera mis à jour en conséquence. Comment le framework sait-il quand il doit mettre à jour une vue et comment met-il à jour la vue ? Découvrons-le. <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

Lorsque nous cliquons sur l'élément div, la fonction handleClick sera exécutée. Alors, comment cette fonction est-elle déclenchée dans les applications Angular ? Si vous avez lu mon article précédent sur l'introduction de zone.js, vous saurez que l'événement click dans les applications angulaires a été repris par zone.js. Sur la base de cette réponse, il est évident que l'exécution doit être déclenchée par zone.js au début, mais ici nous devons analyser plus en détail la relation d'appel direct et l'étendre couche par couche. Le code le plus proche de l'appel de la fonction handleClick est le code suivant : 🎜

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;
}

🎜La fonction listenerFn dans le code ci-dessus pointe vers handleClick, mais elle sont les paramètres de la fonction wrapListener. Dans l'exemple, l'élément est lié à un événement de clic, et le produit de compilation de modèles associé ressemble probablement à ceci : 🎜

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

🎜 Lorsque l'application est chargée pour la première fois, elle exécutera renderView dans l'ordre , puis exécutez executeTemplate, puis déclenchez la fonction de modèle ci-dessus, de sorte que la fonction de clic de l'élément soit transmise jusqu'au paramètre listenerFn. À ce stade, nous comprenons que la source de déclenchement de la fonction de clic est zone.js, mais la livraison réelle de la fonction de clic est implémentée par Angular. Alors, comment sont zone.js et. Lié à l'angulaire ? zone.js organisera une tâche pour chaque événement asynchrone. Sur la base de l'exemple de cet article, invokeTask est appelé par le code suivant : 🎜

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

🎜Est-ce vrai ? très familier, car il existe des extraits de code similaires dans l'article précédent présentant zone.js. La fonction forkInnerZoneWithAngularBehavior est appelée par le constructeur de la classe NgZone. Jusqu'à présent, nous avons présenté NgZone, un protagoniste de la détection des changements angulaires, qui est une simple encapsulation de zone.js. 🎜🎜Maintenant que nous savons comment la fonction de clic dans l'exemple est exécutée, si les données de l'application changent après l'exécution de la fonction, comment la vue peut-elle être mise à jour à temps ? Revenons à la fonction forkInnerZoneWithAngularBehavior mentionnée ci-dessus. Dans le bloc d'instructions try daughter, l'exécution de la fonction invokeTask finira par exécuter onLeave(. zone)fonction. Une analyse plus approfondie permet de voir que la fonction onLeave appelle finalement la fonction checkStable : 🎜rrreee🎜 est abonné en conséquence dans le constructeur de la classe ApplicationRef. Ce Événement submit : 🎜rrreee🎜Dans la fonction de rappel liée à l'abonnement, this.tick() vous semble-t-il familier ? Si vous avez lu mon précédent article sur les fonctions de cycle de vie angulaires, alors vous aurez certainement l'impression que c'est l'appel clé pour déclencher les mises à jour des vues. Bien que cette fonction ait été mentionnée dans l'article d'introduction au cycle de vie, cet article se concentre sur la détection des changements. Par conséquent, bien que la fonction soit la même, l'accent a légèrement changé. this.tickLa séquence d'appel associée ressemble à peu près à ceci : 🎜rrreee🎜Ici, refreshView est plus important et est analysé séparément : 🎜rrreee🎜Dans ce processus, refreshView La fonction sera appelée deux fois. La première fois qu'elle entrera dans la branche code clé 2, puis les fonctions suivantes seront appelées afin de rentrer dans la fonction refreshView : 🎜rrreee🎜Le la deuxième fois, il entre dans refreshViewLa fonction appelle la branche du code clé 1, c'est-à-dire que la fonction executeTemplate est exécutée. Et ce que cette fonction exécute finalement est la fonction AppComponent_Template dans le produit de compilation de modèles : 🎜rrreee🎜 S'il y a encore des lecteurs qui ne savent pas d'où proviennent les fonctions du produit de compilation de modèles ci-dessus, il est recommandé pour lire l'article précédent sur le principe de l'injection de dépendances. L'article d'explication ne sera pas répété en raison du manque de place. À ce stade, la fonction AppComponent_Template exécute le code dans la branche conditionnelle 2 et la fonction ɵɵadvance met à jour la valeur d'index appropriée pour garantir que l'élément correct est trouvé. L'accent est mis ici sur la fonction ɵɵtextInterpolate, qui appelle finalement la fonction ɵɵtextInterpolate1 :🎜

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 的变更检测还有很多没有讲到。比如，如果应用是由若干个组件组成的，父子组件间的变更检测如何进行，以及如何通过策略优化变更检测等等。如果有对这方面感兴趣的朋友，欢迎关注我的个人公众号【朱玉洁的博客】，后续将在那里分享更多前端知识。

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

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!