這5篇文章將使你成爲一個Angular Change Detection專家。

時間 2019-12-05

標籤文章將使成爲一個 angular change detection 專家欄目 AngularJS 简体版

原文原文鏈接

在過去的8個月裏，我大部分空閒時間都是reverse-engineering Angular。我最感興趣的話題是變化檢測。我認爲它是框架中最重要的部分，由於它負責像DOM更新、輸入綁定和查詢列表更新這樣的「可視」工做。個人探索產生了一系列深刻的文章，突出了變化檢測機制的主要思想，深刻了解它的實現細節。在這篇文章中，我把它們放在一塊兒，簡短地描述了每個你能找到什麼。一旦你讀完它們，你將得到變化檢測啓發?。javascript

理解變化檢測

下面是5篇深刻研究的文章，它們將極大的擴展你所知道的Angular變化檢測過程的範圍。每篇文章創建在前一個解釋的信息基礎上，因此我建議你按照他們在這裏列出的順序閱讀它們。html

Angular’s $digest is reborn in the newer version of Angularjava

這篇文章把AngularJS的digest過程和Angular的變化檢測進行了對比。它解釋了對二者的需求，並說明如何使用相同的髒檢查概念來構建它們。而後提供了一些例子，論證了Angular的生命週期鉤子如何做爲相同的機制在AngularJS的$watch中進行使用。它還代表了Angular如今所謂的從上到下的單項數據流不一樣於AngularJS 。文章解釋了這個強制執行背後的緣由以及它對架構的好處和限制。本文將對那些正尋找遷移到Angular有AngularJS經驗的開發者是很是有用的。angularjs

Do you still think that NgZone (zone.js) is required for change detection in Angular?express

這篇文章描述了NgZone是如何在zone.js這個庫上實施的以及NgZone 在這個框架上扮演的角色。與一般的觀點相反，它不是變化檢測過程的一部分，而是用來觸發它的。文章首先說明Angular能夠檢測變化進行渲染，沒有ngzone和zone.js，進而說明NgZone帶來的價值以及它如何實現的。文章的大部份內容是解釋經常使用的公共API如isStable, onUnstable 和 onMicrotaskEmpty。文章最後解釋了當使用第三方庫的時候好比GoogleAPI一些常見的不會被檢測到的變化陷阱。api

Everything you need to know about change detection in Angular架構

若是您想深刻了解變動檢測機制，這篇文章是必讀的。它提供瞭如何使用相關連接進行進一步探索的高級概述。編寫工做首先介紹了一個稱爲View的內部組件表示，並解釋了變動檢測過程在視圖上運行。而後，它列出了在執行順序的變化檢測期間執行的全部操做的列表。這些操做包括更新視圖狀態、渲染、處理輸入綁定和調用生命週期鉤子。最後它解釋了ChangeDetectorRef 公共的API如detach, detectChanges 和 markForCheck以及提供了方法用法的簡短示例。框架

The mechanics of DOM updates in Angulardom

本文深刻探討了與DOM的同步應用模型中的實現細節，即單向數據綁定或DOM渲染。此操做在變動檢測過程當中佔據中心位置，由於它正是使組件在DOM渲染中呈現變化的緣由。本文首先介紹了關於View(視圖)概念的附加細節，特別是View Factory (視圖工廠)和幾個基本類型的View Nodes(視圖節點)。而後，它展現了變動檢測機制如何經過對這些節點進行插值或輸入綁定來執行DOM更新設置。ide

The mechanics of property bindings update in Angular

與前面關於DOM更新的文章相似，這篇文章探討了負責更新子組件和指令的輸入綁定的過程的實現細節。它引入了綁定定義的概念及其在變化檢測過程當中的做用。而後，它將演示編譯器在處理屬性綁定的模板語法時，如何生成這些綁定定義。最後，它概述了在視圖節點上運行變化檢測和更新子組件和指令的輸入屬性的一個按部就班的過程。

避免常見的困惑

這裏是另一些有價值的文章列表，能夠解釋我在stackoverflow常常看到的關於變化檢測的一些困惑。

Do you really know what unidirectional data flow means in Angular

本文解釋雙向數據綁定和單向數據流之間的區別。它演示了在Angular和AngularJS 中更新輸入綁定的過程是如何不一樣的，以及這種差別是如何重要的。

Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error

這篇文章解釋了Angular社區頻繁和常常被誤解的錯誤背後的緣由和機制。雖然有些開發人員認爲它是一個bug，但實際上這是一個設計決策，經過將變動檢測運行限制爲單個運行，而不是AngularJS中的屢次運行($digest runs)，從而提升性能。本文解釋瞭如何拋出錯誤有助於防止模型數據和UI之間的不一致，從而將錯誤或舊數據顯示給頁面上的用戶。本文主要由兩部分組成：第一部分探討錯誤產生的緣由，第二部分提出可能的修正。它還解釋了爲何不在生產模式中拋出錯誤。

If you think ngDoCheck means your component is being checked

本文對於爲何使用OnPush策略組件的ngDoCheck週期鉤子被引起即便對這些組件的輸入綁定沒有改變提供了一個詳細的回答。它解釋了一般未預料到的事實：當父組件被選中時，鉤子會觸發子組件，並顯示該機制是如何觸發ngDoCheck的，即便看起來沒有理由這樣作。文章的第二部分經過演示幾個用例回答了咱們須要ngDoCheck的問題。

The essential difference between Constructor and ngOnInit in Angular

關於在stackoverflow有超過10萬見解的最受歡迎的Angular問題，本文提供了一個詳細的回答，那就是構造函數和ngOnInit之間的差別。本文給出了一個全面的比較，突出了用法上的差別，並對組件初始化過程進行了分析。

Angular Air 上有趣的插曲

我還強烈推薦觀看Angular Air episode，我在這裏討論視圖層的內部表示和更改檢測渲染部分。我也揭示了zones 和使用ChangeDetectorRef變化檢測手動控制相關的一些常見的誤解

關於Angular內幕的實物書

我開始寫一本關於Angular內幕的綜合書。它將被稱爲「Angular內幕，框架結構的最終指南」，並將對編譯器、視圖、DI和更改檢測機制如何在引擎蓋下工做進行深刻的解釋。我還計劃在調試或優化工做時，包含一些真實的示例，說明在虛擬機引導下實現的知識可能會有什麼幫助。這本書大約有150到200頁長，有不少圖表便於理解材料。若是你感興趣的話，你會買一本關於Angular內幕的書嗎？文章提供了更多關於這本書的信息，幷包含一個訂閱表格，你能夠用它告訴我你有興趣買這本書。

感謝您的閱讀! 若是喜歡這篇文章, 請點贊。它對我意義重大，它能幫助其餘人看到這篇文章。對於更高級的文章，你能夠在Twitter或Medium上跟隨我。