淺析Angular中的Change Detection機(jī)制

前端（vue）入門(mén)到精通課程，老師在線(xiàn)輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

什么是 Change Detection ?

在應(yīng)用的開(kāi)發(fā)過(guò)程中，state 代表需要顯示在應(yīng)用上的數(shù)據(jù)。當(dāng) state 發(fā)生變化時(shí)，往往需要一種機(jī)制來(lái)檢測(cè)變化的 state 并隨之更新對(duì)應(yīng)的界面。這個(gè)機(jī)制就叫做 Change Detection 機(jī)制。【相關(guān)教程推薦：《angular教程》】

在 WEB 開(kāi)發(fā)中，更新應(yīng)用界面其實(shí)就是對(duì) DOM 樹(shù)進(jìn)行修改。由于 DOM 操作是昂貴的，所以一個(gè)效率低下的 Change Detection 會(huì)讓?xiě)?yīng)用的性能變得很差。因此，框架在實(shí)現(xiàn) Change Detection 機(jī)制上的高效與否，很大程度上決定了其性能的好壞。

Change Detection 是如何實(shí)現(xiàn)的

Angular 可以檢測(cè)組件數(shù)據(jù)何時(shí)更改，然后自動(dòng)重新渲染視圖以反映該更改。但是在像點(diǎn)擊按鈕這樣的低級(jí)事件之后，它怎么能做到這一點(diǎn)呢？

通過(guò) Zone ， Angular 能夠?qū)崿F(xiàn)自動(dòng)的觸發(fā) Change Detection 機(jī)制。

Zone 是什么呢？簡(jiǎn)而言之，Zone 是一個(gè)執(zhí)行上下文（execution context），可以理解為一個(gè)執(zhí)行環(huán)境。與常見(jiàn)的瀏覽器執(zhí)行環(huán)境不同，在這個(gè)環(huán)節(jié)中執(zhí)行的所有異步任務(wù)都被稱(chēng)為 Task ，Zone 為這些 Task 提供了一堆的鉤子（hook），使得開(kāi)發(fā)者可以很輕松的「監(jiān)控」環(huán)境中所有的異步任務(wù)。

題外話(huà)：由于 Angular 極力的推崇使用可觀察對(duì)象（Observable），如果完全的基于 Observable 來(lái)開(kāi)發(fā)應(yīng)用，可以代替 Zone 來(lái)實(shí)現(xiàn)追蹤調(diào)用棧的功能，且性能還比使用 Zone 會(huì)稍好一些。

  // Angular 在 v5.0.0-beta.8 起可以通過(guò)配置不使用 Zone    import { platformBrowser } from '@angular/platform-browser';   platformBrowser().bootstrapModuleFactory(AppModuleNgFactory, { ngZone: 'noop' });

覆蓋瀏覽器默認(rèn)機(jī)制

Angular 在啟動(dòng)時(shí)會(huì)重寫(xiě)瀏覽器 low-level API，例如addEventListener，它是用于注冊(cè)所有瀏覽器事件的瀏覽器函數(shù)，包括點(diǎn)擊處理。Angular 將替換addEventListener為與此等效的新版本：

// this is the new version of addEventListener                                     function addEventListener(eventName, callback) {      // call the real addEventListener                     callRealAddEventListener(eventName, function() {          //first call the original callback                       callback(...);         // and then run Angular-specific functionality         var changed = angular.runChangeDetection();         if (changed) {             angular.reRenderUIPart();         }     }); }

新的addEventListener為任何事件處理程序添加了