深入浅出讲解Angular变更检测

更新时间：2022年03月01日 14:58:12 作者：Zuckjet

这篇文章主要给大家介绍了关于Angular变更检测的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

Angular 中的变更检测是一种用来将应用程序 UI 的状态与数据的状态同步的机制。当应用逻辑更改组件数据时，绑定到视图中 DOM 属性上的值也要随之更改。变更检测器负责更新视图以反映当前的数据模型。阅读本文之前，建议先查看我的前两篇和变更检测紧密相关的博文，即《揭秘Angular 生命周期函数》和《 Angular 之 zone.js 介绍》。

纸上得来终觉浅，绝知此事要躬行。为了让读者朋友们更容易理解，本文先从一个小的示例入手，然后逐步展开。示例如下：

// 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的值，界面的显示也会随之更新。框架如何知道什么时候需要更新视图，以及如何更新视图的呢？我们来一探究竟。

当我们点击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:

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变更检测的文章就介绍到这了,更多相关Angular变更检测内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Angular2学习教程之ng中变更检测问题详解

angular+ionic 的app上拉加载更新数据实现方法
这篇文章主要介绍了angular+ionic 的app上拉加载更新数据实现方法，需要的的朋友参考下
2017-01-01
AngularJS监听ng-repeat渲染完成的方法
这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
AngularJS中实现用户访问的身份认证和表单验证功能
这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下
2016-04-04
Angular.js 实现带手柄自由调整页面大小的功能
这篇文章主要介绍了Angular.js 实现带手柄自由调整页面大小的功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-12-12
基于datepicker定义自己的angular时间组件的示例
这篇文章主要介绍了基于datepicker定义自己的angular时间组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
总结AngularJS开发者最常犯的十个错误
AngularJS是如今最受欢迎的JS框架之一，简化开发过程是它的目标之一，这使得它非常适合于元型较小的apps的开发，但也扩展到具有全部特征的客户端应用的开发。下面给大家总结了AngularJS开发者最常犯的十个错误，有需要的可以参考学习下。
2016-08-08
angularjs实现搜索的关键字在正文中高亮出来
这篇文章主要介绍了angularjs实现搜索的关键字在正文中高亮出来，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
AngularJs验证重复密码的方法(两种)
本文给大家介绍angularjs验证重复密码的两种方法，每种方法都有各自的优缺点，大家可以根据需要选择一种方法，具体内容详情大家通过本文详细了解下吧
2016-11-11
RequireJs的使用详解
本文主要介绍了RequireJs的使用。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
详解Angular组件之投影
在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。
2021-05-05

深入浅出讲解Angular变更检测

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具