2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

在使用Angular進(jìn)行開(kāi)發(fā)中，我們常用到Angular中的綁定——模型到視圖的輸入綁定、視圖到模型的輸出綁定以及視圖與模型的雙向綁定。而這些綁定的值之所以能在視圖與模型之間保持同步，正是得益于Angular中的變化檢測(cè)。

變化檢測(cè)是什么？

簡(jiǎn)單來(lái)說(shuō)變化檢測(cè)就是Angular用來(lái)檢測(cè)視圖與模型之間綁定的值是否發(fā)生了改變，當(dāng)檢測(cè)到模型中綁定的值發(fā)生改變時(shí)，則同步到視圖上，反之，當(dāng)檢測(cè)到視圖上綁定的值發(fā)生改變時(shí)，則回調(diào)對(duì)應(yīng)的綁定函數(shù)。

什么情況下會(huì)引起變化檢測(cè)？

變化檢測(cè)的關(guān)鍵在于如何最小粒度地檢測(cè)到綁定的值是否發(fā)生了改變，那么在什么情況下會(huì)導(dǎo)致這些綁定的值發(fā)生變化呢？我們可以看一下我們常用的幾種場(chǎng)景：

@Component({ selector:?'my-app', template:?` <h1>{{name}}</h1> <button (click)="changeName()">change name</button> ` }) export class?MyApp?{ name='Tom'; changeName(){ this.name='Jerry' } }

我們?cè)谝晥D上通過(guò)插值表達(dá)式綁定了MyApp中的name屬性，當(dāng)點(diǎn)擊按鈕時(shí)，改變了name屬性的值，這時(shí)就導(dǎo)致了綁定的值發(fā)生了變化。再來(lái)看另外一種場(chǎng)景：

@Component({ selector:?'my-app', template:?`<h1>{{name}}</h1>`, styleUrls: ['./app.component.css'] }) export class?MyApp?implements?OnInit{ name='Tom'; constructor(private?http:Http){} ngOnInit(){ this.http.get('/contacts') .map(res=>res.json) .subscribe(name=>this.name=name); } }

我們?cè)贛yApp這個(gè)組件的生命周期鉤子函數(shù)里向服務(wù)器端發(fā)送了一個(gè)Ajax請(qǐng)求，當(dāng)這個(gè)請(qǐng)求返回結(jié)果時(shí)，同樣會(huì)改變當(dāng)前視圖上綁定的name屬性的值。類似的，我們還可能設(shè)定一些定時(shí)任務(wù)，這些定時(shí)任務(wù)也可能會(huì)改變與視圖綁定的值：

@Component({ selector:?'my-app', template:?`<h1>{{name}}</h1>`, styleUrls: ['./app.component.css'] }) export class?MyApp?implements?OnInit{ name='Tom'; constructor(private?http:Http){} ngOnInit(){ setTimeout(()=>{ this.name='Jerry' },1000); } }

其實(shí)，我們不難發(fā)現(xiàn)上述三種情況都有一個(gè)共同點(diǎn)，即這些導(dǎo)致綁定值發(fā)生改變的事件都是異步發(fā)生的。如果這些異步的事件在發(fā)生時(shí)能夠通知到Angular框架，那么Angular框架就能及時(shí)的檢測(cè)到變化。

那么Angular框架如何才能獲知到這些異步事件的發(fā)生呢？我們不妨來(lái)看一看異步事件在JavaScript中執(zhí)行的過(guò)程：

左邊表示將要運(yùn)行的代碼，這里的stack表示JavaScript的運(yùn)行棧，而webApi則是瀏覽器中提供的一些JavaScript的API，TaskQueue表示JavaScript中任務(wù)隊(duì)列，因?yàn)镴avaScript是單線程的，異步任務(wù)在任務(wù)隊(duì)列中執(zhí)行。

當(dāng)上述代碼在JavaScript中執(zhí)行時(shí)，首先f(wàn)unc1 進(jìn)入運(yùn)行棧，func1執(zhí)行完畢后，setTimeout進(jìn)入運(yùn)行棧，執(zhí)行setTimeout過(guò)程中將回調(diào)函數(shù)cb 加入到任務(wù)隊(duì)列，然后setTimeout出棧，接著執(zhí)行func2函數(shù)，func2函數(shù)執(zhí)行完畢時(shí)，運(yùn)行棧為空，接著任務(wù)隊(duì)列中cb 進(jìn)入運(yùn)行棧得到執(zhí)行?？梢钥闯霎惒饺蝿?wù)首先會(huì)進(jìn)入任務(wù)隊(duì)列，當(dāng)運(yùn)行棧中的同步任務(wù)都執(zhí)行完畢時(shí)，異步任務(wù)進(jìn)入運(yùn)行棧得到執(zhí)行。如果這些異步的任務(wù)執(zhí)行前與執(zhí)行后能提供一些鉤子函數(shù)，通過(guò)這些鉤子函數(shù)，Angular便能獲知異步任務(wù)的執(zhí)行。

事實(shí)上，Angular正是使用Zonejs(它描述JavaScript執(zhí)行過(guò)程的上下文，可以在異步任務(wù)之間進(jìn)行持久性傳遞，它類似于Java中的TLS)來(lái)做到的。Zonejs通過(guò)猴子補(bǔ)丁的方式，對(duì)webApi中的一些異步任務(wù)的API在運(yùn)行時(shí)進(jìn)行替換，替換后的API提供了一些鉤子函數(shù)。

變化檢測(cè)是個(gè)什么樣的過(guò)程？

通過(guò)上面的介紹，我們大致明白了變化檢測(cè)是如何被觸發(fā)的，那么Angular中的變化檢測(cè)是如何執(zhí)行的呢？首先我們需要知道的是，對(duì)于每一個(gè)組件，都有一個(gè)對(duì)應(yīng)的變化檢測(cè)器；即每一個(gè)Component都對(duì)應(yīng)有一個(gè)changeDetector，我們可以在Component中通過(guò)依賴注入來(lái)獲取到changeDetector。而我們的多個(gè)Component是一個(gè)樹(shù)狀結(jié)構(gòu)的組織，由于一個(gè)Component對(duì)應(yīng)一個(gè)changeDetector，那么changeDetector之間同樣是一個(gè)樹(shù)狀結(jié)構(gòu)的組織。最后我們需要記住的一點(diǎn)是，每次變化檢測(cè)都是從樹(shù)根開(kāi)始的。

枯燥無(wú)味的理論到此結(jié)束，下面通過(guò)一些例子來(lái)直觀的感受一下。

Main.component.ts ： import?{Component}?from?'@angular/core'; import?{Actor}?from?'./actor.model'; @Component({ selector:?'main', template:?` <h1>MovieApp</h1> <p>{{?slogan}}</p> <button type="button" (click)="changeActorProperties()">Change Actor Properties </button> <button type="button" (click)="changeActorObject()"> ChangeActorObject </button> <movie [title]="title" [actor]="actor"></movie>` })export class?MainComponent?{ slogan:?string?=?'Just movie information'; title:?string?=?'Terminator 1'; actor:?Actor?=?new?Actor('Arnold',?'Schwarzenegger'); changeActorProperties() { this.actor.firstName?=?'Nicholas'; this.actor.lastName?=?'Cage'; }changeActorObject() { this.actor?=?new?Actor('Bruce',?'Willis'); } }Movie.component.ts： import?{Component,?Input}?from?'@angular/core'; import?{Actor}?from?'./actor.model'; @Component({ selector:?'movie', styles: ['div{border: 1px solid black}'], template:?` <div> <h3>{{?title}}</h3> <p> <label>Actor:</label> <span>{{actor.firstName}} {{actor.lastName}}</span> </p> </div>` }) export class?MovieComponent?{ @Input()?title:?string; @Input()?actor:?Actor;}

上述代碼中，MainComponent通過(guò)<movie></movie> 標(biāo)簽嵌入了MovieComponent，從樹(shù)狀結(jié)構(gòu)上來(lái)說(shuō)，MainComponent是MovieComponent的根節(jié)點(diǎn)，而MovieComponent是MainComponent的葉子節(jié)點(diǎn)。當(dāng)我們點(diǎn)擊MainComponent的第一個(gè)button時(shí)，會(huì)回調(diào)到changeActorProperties方法，然后會(huì)觸發(fā)變化檢測(cè)的執(zhí)行。首先變化檢測(cè)從MainComponent開(kāi)始：

• 檢測(cè)slogan 值是否發(fā)生了變化：沒(méi)有發(fā)生變化

• 檢測(cè) title 值是否發(fā)生了變化：沒(méi)有發(fā)生變化

• 檢測(cè) actor 值是否發(fā)生了變化：沒(méi)有發(fā)生變化

你可能對(duì)于 actor的檢測(cè)結(jié)果感到疑惑，不是明明改變了actor的屬性值嗎？實(shí)質(zhì)上在對(duì)actor檢測(cè)時(shí)只檢測(cè)actor 本身的引用值是否發(fā)生了改變，改變actor的屬性值并未改變actor 本身的引用，因此是沒(méi)有發(fā)生變化。而當(dāng)我們點(diǎn)擊MainComponent的第二個(gè)button ，重新new了一個(gè) actor ，這時(shí)變化檢測(cè)才會(huì)檢測(cè)到 actor發(fā)生了改變。

然后變化檢測(cè)進(jìn)入到葉子節(jié)點(diǎn)MovieComponent：

• 檢測(cè)title 值是否發(fā)生了改變：沒(méi)有發(fā)生變化

• 檢測(cè)actor.firstName 是否發(fā)生了變化：發(fā)生了改變

• 檢測(cè)actor.lastName 是否發(fā)生了改變：發(fā)生了改變

因?yàn)镸ovieComponent再也沒(méi)有了葉子節(jié)點(diǎn)，所以變化檢測(cè)將更新DOM，同步視圖與模型之間的變化。

看到這里你可能會(huì)想，這機(jī)制未免也有點(diǎn)太簡(jiǎn)單粗暴了吧，假如我的應(yīng)用中有成百上千個(gè)Component，隨便一個(gè)Component 觸發(fā)了檢測(cè)，那么都需要從根節(jié)點(diǎn)到葉子節(jié)點(diǎn)重新檢測(cè)一遍。別著急，Angular 的開(kāi)發(fā)團(tuán)隊(duì)已經(jīng)考慮到了這個(gè)問(wèn)題，上述的檢測(cè)機(jī)制只是一種默認(rèn)的檢測(cè)機(jī)制，Angular還提供一種OnPush的檢測(cè)機(jī)制，還是同樣的例子，下面看一下OnPush檢測(cè)機(jī)制是咋樣的：

Main.component.ts ： import?{Component,?ChangeDetectionStrategy}?from?'@angular/core'; import?{Actor}?from?'./actor.model'; @Component({ selector:?'main', template:?` <h1>MovieApp</h1> <p>{{?slogan}}</p> <button type="button" (click)="changeActorProperties()"> Change Actor Properties </button> <button type="button" (click)="changeActorObject()"> Change Actor Object </button> <movie [title]="title" [actor]="actor"></movie>`, changeDetection:ChangeDetectionStrategy.OnPush })export class?MainComponent?{ slogan:?string?=?'Just movie information'; title:?string?=?'Terminator 1'; actor:?Actor?=?new?Actor('Arnold',?'Schwarzenegger'); changeActorProperties() { this.actor.firstName?=?'Nicholas'; this.actor.lastName?=?'Cage'; } changeActorObject() { this.actor?=?new?Actor('Bruce',?'Willis'); } }

與上面的代碼相比，只在@Component中添加了：

changeDetection:ChangeDetectionStrategy.OnPush

即將檢測(cè)機(jī)制設(shè)置為OnPush。同樣的，當(dāng)我們點(diǎn)擊第一個(gè)button時(shí)，將會(huì)發(fā)生如下變化檢測(cè)：

• 檢測(cè)slogan 值是否發(fā)生了變化：沒(méi)有發(fā)生變化

• 檢測(cè) title 值是否發(fā)生了變化：沒(méi)有發(fā)生變化

• 檢測(cè) actor 值是否發(fā)生了變化：沒(méi)有發(fā)生變化

好，變化檢測(cè)到此結(jié)束，不會(huì)再進(jìn)入到 MovieComponent 中了。這正是OnPush與Default之間的差別：當(dāng)檢測(cè)到與子組件輸入綁定的值沒(méi)有發(fā)生改變時(shí)，變化檢測(cè)就不會(huì)深入到子組件中去。那么當(dāng)我們點(diǎn)擊MainComponent中的第二個(gè)按鈕時(shí)，由于改變了actor本身而不是它的屬性值，那么就會(huì)檢測(cè)到actor的變化，進(jìn)而繼續(xù)進(jìn)入到MovieComponent 進(jìn)行變化檢測(cè)。所以，當(dāng)你使用了OnPush檢測(cè)機(jī)制時(shí)，在修改一個(gè)綁定值的屬性時(shí)，要確保同時(shí)修改到了綁定值本身的引用。但是每次需要改變屬性值的時(shí)候去new一個(gè)新的對(duì)象會(huì)使得代碼很難看，并且有時(shí)候你難以保證你一定記得這么做，恩，immutable.js 你值得擁有！

另外一個(gè)問(wèn)題就是，當(dāng)我們使用OnPush并且輸入綁定的是一個(gè)Observable對(duì)象時(shí)，怎么才能檢測(cè)到當(dāng)訂閱的事件發(fā)生時(shí)引起的綁定的值的發(fā)生了改變呢？比如下面這個(gè)組件：

import?{Component,?Input,?ChangeDetectionStrategy}?from?'@angular/core'; import?{Observable}?from?"rxjs"; @Component({ selector:?'my-count', template:?`<span>{{count}}</span>`, changeDetection:ChangeDetectionStrategy.OnPush })export class?CountComponent?{ @Input()?addItemStream:?Observable<any>; count=0; ngOnInit(){ this.addItemStream.subscribe(()=>{ this.count++; }); } }

輸入綁定 addItemStream 是一個(gè)Observable對(duì)象，Observable對(duì)象本身是不會(huì)變化的，只有當(dāng)訂閱的事件到達(dá)時(shí)，才會(huì)去修改count的值。如果使用OnPush 那么檢測(cè)就不會(huì)進(jìn)入到CountComponent。解決的辦法很簡(jiǎn)單，只需在修改count的值后做一個(gè)標(biāo)記(markForCheck)，那么變化檢測(cè)就會(huì)沿著CountComponent所在的樹(shù)枝進(jìn)行變化檢測(cè)。

import?{Component,?Input,?ChangeDetectionStrategy,?ChangeDetectorRef}?from?'@angular/core'; import?{Observable}?from?"rxjs"; @Component({ selector:?'my-count', template:?`<span>{{count}}</span>`, changeDetection:ChangeDetectionStrategy.OnPush }) export class?CountComponent?{ @Input()?addItemStream:?Observable<any>; count=0; constructor(private?cd:ChangeDetectorRef){ } ngOnInit(){ this.addItemStream.subscribe(()=>{ this.count++; this.cd.markForCheck(); }); } }

總結(jié)

總結(jié)來(lái)說(shuō)，Angular中變化檢測(cè)器是樹(shù)型結(jié)構(gòu)的組織，與組件樹(shù)結(jié)構(gòu)相對(duì)應(yīng)，默認(rèn)情況下，當(dāng)一個(gè)組件引發(fā)了變化檢測(cè)時(shí)，檢測(cè)是從樹(shù)根開(kāi)始一直檢測(cè)到樹(shù)節(jié)點(diǎn)。當(dāng)你設(shè)置某個(gè)組件的檢測(cè)策略是 OnPush 時(shí)，如果該組件的輸入綁定沒(méi)有發(fā)生變化時(shí)，那么檢測(cè)就不會(huì)進(jìn)入到該組件。當(dāng)組件樹(shù)變的很龐大時(shí)，常用這種辦法來(lái)提高應(yīng)用的性能。

轉(zhuǎn)載于:https://my.oschina.net/u/2285087/blog/1142820

總結(jié)

以上是生活随笔為你收集整理的Angular变化检测机制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。