Angular中的变更实例检测分析
本篇内容介绍了“Angular中的变更实例检测分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
目前创新互联已为成百上千家的企业提供了网站建设、域名、网络空间、网站托管维护、企业网站设计、莱山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
Angular 中的变更检测是一种用来将应用程序 UI 的状态与数据的状态同步的机制。当应用逻辑更改组件数据时,绑定到视图中 DOM 属性上的值也要随之更改。变更检测器负责更新视图以反映当前的数据模型。
纸上得来终觉浅,绝知此事要躬行。为了让读者朋友们更容易理解,本文先从一个小的示例入手,然后逐步展开。示例如下:
// 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{{title}}
示例比较简单,就是给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中的变更实例检测分析
URL链接:http://pwwzsj.com/article/goddsh.html