姓名：韓宜真
學(xué)號：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)用有著較好的運行效率怀挠。
在使用angular進(jìn)行開發(fā)中，我們常用到angular中的綁定---模型到視圖的輸入綁定害捕、視圖到模型的輸出綁定以及視圖與模型的雙向綁定绿淋，而這些綁定的值之所以能在視圖與模型之間保持同步，正是得益于Angular中的變化檢測尝盼。
變化檢測是啥吞滞？
簡單來說，變化檢測就是Angular用來檢測視圖與模型之間綁定的值是否發(fā)生了改變盾沫，當(dāng)檢測到模型中綁定的值發(fā)生改變時裁赠，則同步到視圖上；
反之赴精，當(dāng)檢測到視圖上綁定的值發(fā)生改變時佩捞，則回調(diào)對應(yīng)的綁定函數(shù)。
什么情況下會引起變化檢測呢祖娘？
變化檢測的關(guān)鍵在于如何最小粒度的檢測到綁定的值是否發(fā)生了改變失尖。
那么在什么情況下會導(dǎo)致這些綁定的值發(fā)生變化呢？
我們可以看一下我們常用的幾種場景：
我們在視圖上通過插值表達(dá)式綁定了Myapp?中的name屬性渐苏，當(dāng)點擊按鈕時掀潮，改變了name屬性的值，這時就導(dǎo)致了綁定的值發(fā)生了變化琼富。
再來看另外一種場景：
我們在MyApp這個組件的生命周期鉤子函數(shù)里向服務(wù)器端發(fā)送了一個ajax請求仪吧，當(dāng)這個請求返回結(jié)果時，同樣的鞠眉，會改變當(dāng)前視圖上綁定的name屬性的值薯鼠。
類似的，我們還可能設(shè)定一些定時任務(wù)械蹋，這些定時任務(wù)也可能會改變與視圖綁定的值：
其實出皇，我們不難發(fā)現(xiàn)上述三種情況都有一個共同點哗戈，即這些導(dǎo)致綁定值發(fā)生改變的事件都是異步發(fā)生的。
如果這些異步的事件在發(fā)生時能夠通知到Angular框架纱注，那么Angular框架就能及時的檢測到變化。
那么Angular框架如何才能獲知到這些異步事件的發(fā)生呢狞贱？
我們不妨來看一看異步事件在Javascript中執(zhí)行的過程：
左邊表示將要運行的代碼刻获，這里的stack表示javascript的運行棧蝎毡，而webApi則是瀏覽器中提供的一些javascript的api氧枣，TaskQueue表示javascript中任務(wù)隊列，因為javascript是單線程的，異步任務(wù)在任務(wù)隊列中執(zhí)行茬贵。
當(dāng)上述代碼在javascript中執(zhí)行時移袍，首先func1?進(jìn)入運行棧，func1執(zhí)行完畢后螟左，setTimeout進(jìn)入運行棧胶背，執(zhí)行setTimeout?過程中將回調(diào)函數(shù)cb?加入到任務(wù)隊列喘先，然后setTimeout出棧窘拯，接著執(zhí)行func2函數(shù)，func2函數(shù)執(zhí)行完畢時暇番，運行棧為空思喊，接著任務(wù)隊列中cb?進(jìn)入運行棧得到執(zhí)行。
可以看出異步任務(wù)首先會進(jìn)入任務(wù)隊列和措，當(dāng)運行棧中的同步任務(wù)都執(zhí)行完畢時蜕煌，異步任務(wù)進(jìn)入運行棧得到執(zhí)行斜纪。
如果這些異步的任務(wù)執(zhí)行前與執(zhí)行后能提供一些鉤子函數(shù)，通過這些鉤子函數(shù)腺劣，Angular便能獲知異步任務(wù)的執(zhí)行橘原。
事實上涡上，angular正是使用zonejs來做到的吩愧。
Zonejs通過猴子補(bǔ)丁的方式，對webApi中的一些異步任務(wù)的API在運行時進(jìn)行替換脐帝，替換后的api提供了一些鉤子函數(shù)堵腹。
Angular中的變化檢測是個怎樣的過程呢温兼？
通過上面的介紹募判，我們大致明白了變化檢測是如何被觸發(fā)的，那么Angular中的變化檢測是如何執(zhí)行的呢释液？
首先我們需要知道的是误债，對于每一個組件，都有一個對應(yīng)的變化檢測器李命；
即每一個component都對應(yīng)有一個changeDetector封字，我們可以在component中通過依賴注入來獲取到changeDetector耍鬓。
而我們的多個component是一個樹狀結(jié)構(gòu)的組織牲蜀，由于一個component對應(yīng)一個changeDetector涣达，那么changeDetector之間同樣是一個樹狀結(jié)構(gòu)的組織度苔。
最后我們需要記住的一點是林螃，每次變化檢測都是從樹根開始的疗认。
枯燥無味的理論到此結(jié)束横漏，下面通過一些例子來直觀的感受一下缎浇。
?Main.component.ts?：
Movie.component.ts：
上述代碼中素跺，MainComponent通過?<movie></movie>?標(biāo)簽嵌入了MovieComponent，從樹狀結(jié)構(gòu)上來說誉券，MainComponent是MovieComponent的根節(jié)點指厌，而MovieComponent是MainComponent的葉子節(jié)點。當(dāng)我們點擊MainComponent的第一個button時踊跟，會回調(diào)到changeActorProperties方法踩验，然后會觸發(fā)變化檢測的執(zhí)行。首先變化檢測從MainComponent開始：
ü?檢測slogan?值是否發(fā)生了變化----沒有發(fā)生變化
ü?檢測?title?值是否發(fā)生了變化-----沒有發(fā)生變化
ü?檢測?actor?值是否發(fā)生了變化-----沒有發(fā)生變化
你可能對于?actor的檢測結(jié)果感到疑惑牡借，不是明明改變了actor的屬性值嗎？實質(zhì)上在對actor檢測只檢測actor?本身的引用值是否發(fā)生了改變袭异，改變actor的屬性值并未改變actor?本身的引用钠龙，因此是沒有發(fā)生變化俊鱼。而當(dāng)我們點擊MainComponent的第二個button?，重新new了一個?actor?，這時變化檢測才會檢測到?actor發(fā)生了改變犀填。
然后變化檢測進(jìn)入到葉子節(jié)點--MovieComponent：
ü?檢測title?值是否發(fā)生了改變---沒有發(fā)生變化
ü?檢測?actor.firstName?是否發(fā)生了變化--發(fā)生了改變
ü?檢測?actor.lastName?是否發(fā)生了改變--發(fā)生了改變
因為MovieComponent再也沒有了葉子節(jié)點，所以變化檢測將更新DOM冕广，同步視圖與模型之間的變化撒汉。
看到這里你可能會想，這機(jī)制未免也有點太簡單粗暴了吧涕滋，假如我的應(yīng)用中有成百上千個component睬辐，隨便一個component?觸發(fā)了檢測，那么都需要從根節(jié)點到葉子節(jié)點重新檢測一遍宾肺。對的瓣喊，Angular?的開發(fā)團(tuán)隊已經(jīng)考慮到了這個問題，上述的檢測機(jī)制只是一種默認(rèn)的檢測機(jī)制黔酥，Angular還提供一種OnPush的檢測機(jī)制藻三，還是同樣的例子洪橘，下面看一下OnPush檢測機(jī)制是咋樣的：
Main.component.ts?：
與上面的代碼相比，只在@Component中添加了
即將檢測機(jī)制設(shè)置為OnPush棵帽。同樣的熄求，當(dāng)我們點擊第一個button時，將會發(fā)生如下變化檢測：
ü?檢測slogan?值是否發(fā)生了變化----沒有發(fā)生變化
ü?檢測?title?值是否發(fā)生了變化-----沒有發(fā)生變化
ü?檢測?actor?值是否發(fā)生了變化-----沒有發(fā)生變化
好逗概，變化檢測到此結(jié)束弟晚，不會再進(jìn)入到?MovieComponent?中了。
這正是OnPush與Default之間的差別：當(dāng)檢測到與子組件輸入綁定的值沒有發(fā)生改變時逾苫，變化檢測就不會深入到子組件中去卿城。
那么當(dāng)我們點擊MainComponent中的第二個按鈕時，由于改變了actor本身而不是它的屬性值铅搓，那么就會檢測到actor的變化瑟押，進(jìn)而繼續(xù)進(jìn)入到MovieComponent?進(jìn)行變化檢測。
所以星掰，當(dāng)你使用了OnPush檢測機(jī)制時多望，在修改一個綁定值的屬性時，要確保同時修改到了綁定值本身的引用氢烘。
但是每次需要改變屬性值的時候去new一個新的對象會使得代碼很難看怀偷，并且有時候你難以保證你一定記得這么做，恩播玖，immutable.js?你值得擁有椎工！
另外一個問題就是，當(dāng)我們使用OnPush蜀踏，并且輸入綁定的是一個Observable對象時晋渺，該怎么讓檢測到當(dāng)訂閱的事件發(fā)生時引起的綁定的值的發(fā)生的改變呢？
比如下面這個組件：
輸入綁定?addItemStream?是一個Observable對象脓斩，Observable對象本身是不會變化的，只有當(dāng)訂閱的事件到達(dá)時畴栖，才會去修改count的值随静。
如果使用OnPush?那么檢測就不會進(jìn)入到CountComponent。
解決的辦法很簡單吗讶，只需在修改count的值后做一個標(biāo)記(markForCheck)燎猛，那么變化檢測就會沿著CountComponent所在的樹枝進(jìn)行變化檢測。
總結(jié)
總結(jié)來說照皆，Angular中變化檢測器是樹型結(jié)構(gòu)的組織重绷，與組件樹結(jié)構(gòu)相對應(yīng)，默認(rèn)情況下膜毁，當(dāng)一個組件引發(fā)了變化檢測時昭卓，檢測是從樹根開始一直檢測到樹節(jié)點愤钾。當(dāng)你設(shè)置某個組件的檢測策略是?OnPush?時，如果該組件的輸入綁定沒有發(fā)生變化時候醒，那么檢測就不會進(jìn)入到該組件能颁。當(dāng)組件樹變的很龐大時，常用這種辦法來提高應(yīng)用的性能倒淫。?
