예제를 통해 Angular의 변경 감지에 대해 이야기해 보겠습니다.

이 글에서는 Angular의 변경 감지에 대해 설명하겠습니다. 작은 예부터 시작해 점차적으로 변경 감지에 대해 심도 있게 논의하겠습니다. 모두에게 도움이 되기를 바랍니다.

Angular의 변경 감지는 애플리케이션 UI의 상태를 데이터의 상태와 동기화하는 데 사용되는 메커니즘입니다. 애플리케이션 로직이 구성요소 데이터를 변경하면 뷰의 DOM 속성에 바인딩된 값도 변경됩니다. 변경 감지기는 현재 데이터 모델을 반영하도록 뷰를 업데이트하는 일을 담당합니다. [추천 관련 튜토리얼: "angular Tutorial"]

종이에서 배우는 내용은 얕지만, 해봐야 한다는 것을 알고 있습니다. 독자들이 더 쉽게 이해할 수 있도록 이 기사에서는 작은 예부터 시작하여 단계별로 확장해 나가고 있습니다. 예는 다음과 같습니다.

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

예는 비교적 간단합니다. 즉, 클릭 이벤트를 div 요소에 바인딩하면 title< 변수의 값이 변경됩니다. /code>에 따라 인터페이스 표시도 변경됩니다. 프레임워크는 뷰를 업데이트해야 하는 시기를 어떻게 알고, 뷰를 어떻게 업데이트합니까? 알아봅시다. <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

div 요소를 클릭하면 handleClick 함수가 실행됩니다. 그렇다면 이 기능은 Angular 애플리케이션에서 어떻게 트리거됩니까? zone.js 도입에 대한 이전 기사를 읽으셨다면 Angular 애플리케이션의 클릭 이벤트가 zone.js에 의해 인계되었다는 것을 아실 것입니다. 이 답변에 따르면 처음에는 실행이 zone.js에 의해 트리거되어야 한다는 것이 분명하지만 여기서는 직접 호출 관계를 더 분석하고 계층별로 확장해야 합니다. handleClick 함수 호출에 가장 가까운 코드는 다음 코드입니다. 🎜

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

🎜위 코드의 listenerFn 함수는 handleClick을 가리키지만 wrapListener 함수의 매개변수입니다. 예제에서 요소는 클릭 이벤트에 바인딩되어 있으며 관련 템플릿 컴파일 제품은 아마도 다음과 같습니다. 🎜

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

🎜 애플리케이션이 처음 로드되면 renderView가 순차적으로 실행됩니다. , 그리고 executeTemplate을 실행한 다음 위의 템플릿 함수를 트리거하여 요소의 클릭 기능이 listenerFn 매개변수까지 전달되도록 합니다. 이 시점에서 우리는 클릭 기능의 트리거 소스가 zone.js이지만 실제 클릭 기능 전달은 Angular에 의해 구현된다는 것을 이해합니다. 각도 관련은 어떻습니까? zone.js는 이 기사의 예제를 기반으로 다음 코드에 의해 invokeTask를 호출합니다. 🎜

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

🎜맞나요? zone.js를 소개하는 이전 기사에 비슷한 코드 조각이 있기 때문에 매우 익숙합니다. forkInnerZoneWithAngularBehavior 함수는 NgZone 클래스의 생성자에 의해 호출됩니다. 지금까지 zone.js를 간단하게 캡슐화한 Angular 변화 감지의 주역인 NgZone을 소개했습니다. 🎜🎜이제 예제의 클릭 함수가 어떻게 실행되는지 알았으니, 함수 실행 후 애플리케이션 데이터가 변경되면 어떻게 뷰가 시간에 맞춰 업데이트될 수 있을까요? 위에서 언급한 forkInnerZoneWithAngularBehavior 함수로 돌아가 보겠습니다. try finally 문 블록에서 invokeTask 함수를 실행하면 결국 onLeave( zone) 함수입니다. 추가 분석을 통해 onLeave 함수가 최종적으로 checkStable 함수를 호출하는 것을 볼 수 있습니다. 🎜rrreee🎜는 이에 따라 ApplicationRef 클래스 생성자에서 구독됩니다. 이 Emit 이벤트: 🎜rrreee🎜구독 관련 콜백 함수에서 this.tick()이 익숙하게 보이죠? Angular 수명 주기 기능에 대한 이전 기사를 읽었다면 이것이 뷰 업데이트를 트리거하는 핵심 호출이라는 인상을 확실히 받게 될 것입니다. 이 기능은 라이프사이클 소개 글에서 언급했지만, 이번 글에서는 변화 감지에 초점을 두고 있기 때문에, 기능은 동일하지만 초점이 조금 바뀌었습니다. this.tick관련 호출 순서는 대략 다음과 같습니다. 🎜rrreee🎜여기서 refreshView가 더 중요하며 별도로 분석됩니다. 🎜rrreee🎜이 프로세스에서 refreshView </code >함수는 처음 키코드 2번 브랜치를 입력하면 두 번 호출되며, 이후 <code>refreshView 함수를 다시 입력하기 위해 다음 함수가 호출됩니다. 🎜rrreee🎜The 두 번째로 refreshView에 들어가면 함수는 키 코드 1 분기를 호출합니다. 즉, executeTemplate 함수가 실행됩니다. 그리고 이 함수가 궁극적으로 실행하는 것은 템플릿 컴파일 제품의 AppComponent_Template 함수입니다: 🎜rrreee🎜 위 템플릿 컴파일 제품의 기능이 어떻게 나오는지 아직도 잘 모르는 독자가 있다면 추천합니다. 의존성 주입의 원리에 대해서는 이전 글을 읽어보시기 바랍니다. 설명 글은 지면의 제약으로 반복하지 않겠습니다. 이때 AppComponent_Template 함수는 조건 분기 2의 코드를 실행하고, ɵɵadvance 함수는 해당 인덱스 값을 업데이트하여 올바른 요소가 발견되었는지 확인합니다. 여기서 초점은 궁극적으로 ɵɵtextInterpolate1 함수를 호출하는 ɵɵtextInterpolate 함수에 있습니다.🎜

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

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

위 내용은 예제를 통해 Angular의 변경 감지에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!