姓名：韓宜真
學(xué)號(hào)：17020120095
轉(zhuǎn)載自：https://mp.weixin.qq.com/s/iLceOG3MqnCSzcv3S71ujA
【嵌牛導(dǎo)讀】本文介紹了Angular 中的變化檢測。
【嵌牛鼻子】變化檢測
【嵌牛提問】Angular 中的變化檢測是怎樣的？
【嵌牛正文】
導(dǎo)讀
作者劉雄風(fēng)主要負(fù)責(zé)Angular的基礎(chǔ)組件的開發(fā)工作。在這篇文章中，他為我們介紹了Angular中的變化檢測(Change Detection)是什么，工作的機(jī)制是怎么樣的，以及怎樣利用好變化檢測，從而使得Angular應(yīng)用有著較好的運(yùn)行效率。
在使用angular進(jìn)行開發(fā)中，我們常用到angular中的綁定---模型到視圖的輸入綁定、視圖到模型的輸出綁定以及視圖與模型的雙向綁定，而這些綁定的值之所以能在視圖與模型之間保持同步，正是得益于Angular中的變化檢測。
變化檢測是啥？
簡單來說，變化檢測就是Angular用來檢測視圖與模型之間綁定的值是否發(fā)生了改變，當(dāng)檢測到模型中綁定的值發(fā)生改變時(shí)，則同步到視圖上；
反之，當(dāng)檢測到視圖上綁定的值發(fā)生改變時(shí)，則回調(diào)對(duì)應(yīng)的綁定函數(shù)。
什么情況下會(huì)引起變化檢測呢？
變化檢測的關(guān)鍵在于如何最小粒度的檢測到綁定的值是否發(fā)生了改變。
那么在什么情況下會(huì)導(dǎo)致這些綁定的值發(fā)生變化呢？
我們可以看一下我們常用的幾種場景：
我們?cè)谝晥D上通過插值表達(dá)式綁定了Myapp?中的name屬性，當(dāng)點(diǎn)擊按鈕時(shí)，改變了name屬性的值，這時(shí)就導(dǎo)致了綁定的值發(fā)生了變化。
再來看另外一種場景：
我們?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ì)改變與視圖綁定的值：
其實(shí)，我們不難發(fā)現(xiàn)上述三種情況都有一個(gè)共同點(diǎn)，即這些導(dǎo)致綁定值發(fā)生改變的事件都是異步發(fā)生的。
如果這些異步的事件在發(fā)生時(shí)能夠通知到Angular框架，那么Angular框架就能及時(shí)的檢測到變化。
那么Angular框架如何才能獲知到這些異步事件的發(fā)生呢？
我們不妨來看一看異步事件在Javascript中執(zhí)行的過程：
左邊表示將要運(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í)，首先func1?進(jìn)入運(yùn)行棧，func1執(zhí)行完畢后，setTimeout進(jìn)入運(yùn)行棧，執(zhí)行setTimeout?過程中將回調(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ù)，通過這些鉤子函數(shù)，Angular便能獲知異步任務(wù)的執(zhí)行。
事實(shí)上，angular正是使用zonejs來做到的。
Zonejs通過猴子補(bǔ)丁的方式，對(duì)webApi中的一些異步任務(wù)的API在運(yùn)行時(shí)進(jìn)行替換，替換后的api提供了一些鉤子函數(shù)。
Angular中的變化檢測是個(gè)怎樣的過程呢？
通過上面的介紹，我們大致明白了變化檢測是如何被觸發(fā)的，那么Angular中的變化檢測是如何執(zhí)行的呢？
首先我們需要知道的是，對(duì)于每一個(gè)組件，都有一個(gè)對(duì)應(yīng)的變化檢測器；
即每一個(gè)component都對(duì)應(yīng)有一個(gè)changeDetector，我們可以在component中通過依賴注入來獲取到changeDetector。
而我們的多個(gè)component是一個(gè)樹狀結(jié)構(gòu)的組織，由于一個(gè)component對(duì)應(yīng)一個(gè)changeDetector，那么changeDetector之間同樣是一個(gè)樹狀結(jié)構(gòu)的組織。
最后我們需要記住的一點(diǎn)是，每次變化檢測都是從樹根開始的。
枯燥無味的理論到此結(jié)束，下面通過一些例子來直觀的感受一下。
?Main.component.ts?：
Movie.component.ts：
上述代碼中，MainComponent通過?<movie></movie>?標(biāo)簽嵌入了MovieComponent，從樹狀結(jié)構(gòu)上來說，MainComponent是MovieComponent的根節(jié)點(diǎn)，而MovieComponent是MainComponent的葉子節(jié)點(diǎn)。當(dāng)我們點(diǎn)擊MainComponent的第一個(gè)button時(shí)，會(huì)回調(diào)到changeActorProperties方法，然后會(huì)觸發(fā)變化檢測的執(zhí)行。首先變化檢測從MainComponent開始：
ü?檢測slogan?值是否發(fā)生了變化----沒有發(fā)生變化
ü?檢測?title?值是否發(fā)生了變化-----沒有發(fā)生變化
ü?檢測?actor?值是否發(fā)生了變化-----沒有發(fā)生變化
你可能對(duì)于?actor的檢測結(jié)果感到疑惑，不是明明改變了actor的屬性值嗎？實(shí)質(zhì)上在對(duì)actor檢測只檢測actor?本身的引用值是否發(fā)生了改變，改變actor的屬性值并未改變actor?本身的引用，因此是沒有發(fā)生變化。而當(dāng)我們點(diǎn)擊MainComponent的第二個(gè)button?，重新new了一個(gè)?actor?，這時(shí)變化檢測才會(huì)檢測到?actor發(fā)生了改變。
然后變化檢測進(jìn)入到葉子節(jié)點(diǎn)--MovieComponent：
ü?檢測title?值是否發(fā)生了改變---沒有發(fā)生變化
ü?檢測?actor.firstName?是否發(fā)生了變化--發(fā)生了改變
ü?檢測?actor.lastName?是否發(fā)生了改變--發(fā)生了改變
因?yàn)镸ovieComponent再也沒有了葉子節(jié)點(diǎn)，所以變化檢測將更新DOM，同步視圖與模型之間的變化。
看到這里你可能會(huì)想，這機(jī)制未免也有點(diǎn)太簡單粗暴了吧，假如我的應(yīng)用中有成百上千個(gè)component，隨便一個(gè)component?觸發(fā)了檢測，那么都需要從根節(jié)點(diǎn)到葉子節(jié)點(diǎn)重新檢測一遍。對(duì)的，Angular?的開發(fā)團(tuán)隊(duì)已經(jīng)考慮到了這個(gè)問題，上述的檢測機(jī)制只是一種默認(rèn)的檢測機(jī)制，Angular還提供一種OnPush的檢測機(jī)制，還是同樣的例子，下面看一下OnPush檢測機(jī)制是咋樣的：
Main.component.ts?：
與上面的代碼相比，只在@Component中添加了
即將檢測機(jī)制設(shè)置為OnPush。同樣的，當(dāng)我們點(diǎn)擊第一個(gè)button時(shí)，將會(huì)發(fā)生如下變化檢測：
ü?檢測slogan?值是否發(fā)生了變化----沒有發(fā)生變化
ü?檢測?title?值是否發(fā)生了變化-----沒有發(fā)生變化
ü?檢測?actor?值是否發(fā)生了變化-----沒有發(fā)生變化
好，變化檢測到此結(jié)束，不會(huì)再進(jìn)入到?MovieComponent?中了。
這正是OnPush與Default之間的差別：當(dāng)檢測到與子組件輸入綁定的值沒有發(fā)生改變時(shí)，變化檢測就不會(huì)深入到子組件中去。
那么當(dāng)我們點(diǎn)擊MainComponent中的第二個(gè)按鈕時(shí)，由于改變了actor本身而不是它的屬性值，那么就會(huì)檢測到actor的變化，進(jìn)而繼續(xù)進(jìn)入到MovieComponent?進(jìn)行變化檢測。
所以，當(dāng)你使用了OnPush檢測機(jī)制時(shí)，在修改一個(gè)綁定值的屬性時(shí)，要確保同時(shí)修改到了綁定值本身的引用。
但是每次需要改變屬性值的時(shí)候去new一個(gè)新的對(duì)象會(huì)使得代碼很難看，并且有時(shí)候你難以保證你一定記得這么做，恩，immutable.js?你值得擁有！
另外一個(gè)問題就是，當(dāng)我們使用OnPush，并且輸入綁定的是一個(gè)Observable對(duì)象時(shí)，該怎么讓檢測到當(dāng)訂閱的事件發(fā)生時(shí)引起的綁定的值的發(fā)生的改變呢？
比如下面這個(gè)組件：
輸入綁定?addItemStream?是一個(gè)Observable對(duì)象，Observable對(duì)象本身是不會(huì)變化的，只有當(dāng)訂閱的事件到達(dá)時(shí)，才會(huì)去修改count的值。
如果使用OnPush?那么檢測就不會(huì)進(jìn)入到CountComponent。
解決的辦法很簡單，只需在修改count的值后做一個(gè)標(biāo)記(markForCheck)，那么變化檢測就會(huì)沿著CountComponent所在的樹枝進(jìn)行變化檢測。
總結(jié)
總結(jié)來說，Angular中變化檢測器是樹型結(jié)構(gòu)的組織，與組件樹結(jié)構(gòu)相對(duì)應(yīng)，默認(rèn)情況下，當(dāng)一個(gè)組件引發(fā)了變化檢測時(shí)，檢測是從樹根開始一直檢測到樹節(jié)點(diǎn)。當(dāng)你設(shè)置某個(gè)組件的檢測策略是?OnPush?時(shí)，如果該組件的輸入綁定沒有發(fā)生變化時(shí)，那么檢測就不會(huì)進(jìn)入到該組件。當(dāng)組件樹變的很龐大時(shí)，常用這種辦法來提高應(yīng)用的性能。?
