乐趣区

关于angular:深入浅出-Angular-变更检测

jiezi

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

退出移动版