這5篇文章將使你成為一個(gè)Angular Change Detection專家。

Coly 發(fā)布于2019-08-21 17:57 / 2225人閱讀

摘要：編寫工作首先介紹了一個(gè)稱為的內(nèi)部組件表示，并解釋了變更檢測(cè)過程在視圖上運(yùn)行。本文主要由兩部分組成第一部分探討錯(cuò)誤產(chǎn)生的原因，第二部分提出可能的修正。它對(duì)我意義重大，它能幫助其他人看到這篇文章。

在過去的8個(gè)月里，我大部分空閑時(shí)間都是reverse-engineering Angular。我最感興趣的話題是變化檢測(cè)。我認(rèn)為它是框架中最重要的部分，因?yàn)樗?fù)責(zé)像DOM更新、輸入綁定和查詢列表更新這樣的“可視”工作。我的探索產(chǎn)生了一系列深入的文章，突出了變化檢測(cè)機(jī)制的主要思想，深入了解它的實(shí)現(xiàn)細(xì)節(jié)。在這篇文章中，我把它們放在一起，簡(jiǎn)短地描述了每一個(gè)你能找到什么。一旦你讀完它們，你將獲得變化檢測(cè)啟發(fā)?。

理解變化檢測(cè)

下面是5篇深入研究的文章，它們將極大的擴(kuò)展你所知道的Angular變化檢測(cè)過程的范圍。每篇文章建立在前一個(gè)解釋的信息基礎(chǔ)上，所以我建議你按照他們?cè)谶@里列出的順序閱讀它們。

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

這篇文章把AngularJS的digest過程和Angular的變化檢測(cè)進(jìn)行了對(duì)比。它解釋了對(duì)兩者的需求，并說明如何使用相同的臟檢查概念來(lái)構(gòu)建它們。然后提供了一些例子，論證了Angular的生命周期鉤子如何作為相同的機(jī)制在AngularJS的$watch中進(jìn)行使用。它還表明了Angular現(xiàn)在所謂的從上到下的單項(xiàng)數(shù)據(jù)流不同于AngularJS 。文章解釋了這個(gè)強(qiáng)制執(zhí)行背后的原因以及它對(duì)架構(gòu)的好處和限制。本文將對(duì)那些正尋找遷移到Angular有AngularJS經(jīng)驗(yàn)的開發(fā)者是非常有用的。

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

這篇文章描述了NgZone是如何在zone.js這個(gè)庫(kù)上實(shí)施的以及NgZone 在這個(gè)框架上扮演的角色。與通常的觀點(diǎn)相反，它不是變化檢測(cè)過程的一部分，而是用來(lái)觸發(fā)它的。文章首先說明Angular可以檢測(cè)變化進(jìn)行渲染，沒有ngzone和zone.js，進(jìn)而說明NgZone帶來(lái)的價(jià)值以及它如何實(shí)現(xiàn)的。文章的大部分內(nèi)容是解釋常用的公共API如isStable, onUnstable 和 onMicrotaskEmpty。文章最后解釋了當(dāng)使用第三方庫(kù)的時(shí)候比如GoogleAPI一些常見的不會(huì)被檢測(cè)到的變化陷阱。

Everything you need to know about change detection in Angular

如果您想深入了解變更檢測(cè)機(jī)制，這篇文章是必讀的。它提供了如何使用相關(guān)鏈接進(jìn)行進(jìn)一步探索的高級(jí)概述。編寫工作首先介紹了一個(gè)稱為View的內(nèi)部組件表示，并解釋了變更檢測(cè)過程在視圖上運(yùn)行。然后，它列出了在執(zhí)行順序的變化檢測(cè)期間執(zhí)行的所有操作的列表。這些操作包括更新視圖狀態(tài)、渲染、處理輸入綁定和調(diào)用生命周期鉤子。最后它解釋了ChangeDetectorRef 公共的API如detach, detectChanges 和 markForCheck以及提供了方法用法的簡(jiǎn)短示例。

The mechanics of DOM updates in Angular

本文深入探討了與DOM的同步應(yīng)用模型中的實(shí)現(xiàn)細(xì)節(jié)，即單向數(shù)據(jù)綁定或DOM渲染。此操作在變更檢測(cè)過程中占據(jù)中心位置，因?yàn)樗鞘菇M件在DOM渲染中呈現(xiàn)變化的原因。本文首先介紹了關(guān)于View(視圖)概念的附加細(xì)節(jié)，特別是View Factory (視圖工廠)和幾個(gè)基本類型的View Nodes(視圖節(jié)點(diǎn))。然后，它展示了變更檢測(cè)機(jī)制如何通過對(duì)這些節(jié)點(diǎn)進(jìn)行插值或輸入綁定來(lái)執(zhí)行DOM更新設(shè)置。

The mechanics of property bindings update in Angular

與前面關(guān)于DOM更新的文章類似，這篇文章探討了負(fù)責(zé)更新子組件和指令的輸入綁定的過程的實(shí)現(xiàn)細(xì)節(jié)。它引入了綁定定義的概念及其在變化檢測(cè)過程中的作用。然后，它將演示編譯器在處理屬性綁定的模板語(yǔ)法時(shí)，如何生成這些綁定定義。最后，它概述了在視圖節(jié)點(diǎn)上運(yùn)行變化檢測(cè)和更新子組件和指令的輸入屬性的一個(gè)循序漸進(jìn)的過程。

避免常見的困惑

這里是另外一些有價(jià)值的文章列表，可以解釋我在stackoverflow經(jīng)常看到的關(guān)于變化檢測(cè)的一些困惑。

Do you really know what unidirectional data flow means in Angular

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

Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error

這篇文章解釋了Angular社區(qū)頻繁和經(jīng)常被誤解的錯(cuò)誤背后的原因和機(jī)制。雖然有些開發(fā)人員認(rèn)為它是一個(gè)bug，但實(shí)際上這是一個(gè)設(shè)計(jì)決策，通過將變更檢測(cè)運(yùn)行限制為單個(gè)運(yùn)行，而不是AngularJS中的多次運(yùn)行($digest runs)，從而提高性能。本文解釋了如何拋出錯(cuò)誤有助于防止模型數(shù)據(jù)和UI之間的不一致，從而將錯(cuò)誤或舊數(shù)據(jù)顯示給頁(yè)面上的用戶。本文主要由兩部分組成：第一部分探討錯(cuò)誤產(chǎn)生的原因，第二部分提出可能的修正。它還解釋了為什么不在生產(chǎn)模式中拋出錯(cuò)誤。

If you think ngDoCheck means your component is being checked

本文對(duì)于為什么使用OnPush策略組件的ngDoCheck周期鉤子被引發(fā)即使對(duì)這些組件的輸入綁定沒有改變提供了一個(gè)詳細(xì)的回答。它解釋了通常未預(yù)料到的事實(shí)：當(dāng)父組件被選中時(shí)，鉤子會(huì)觸發(fā)子組件，并顯示該機(jī)制是如何觸發(fā)ngDoCheck的，即使看起來(lái)沒有理由這樣做。文章的第二部分通過演示幾個(gè)用例回答了我們需要ngDoCheck的問題。

The essential difference between Constructor and ngOnInit in Angular

關(guān)于在stackoverflow有超過10萬(wàn)看法的最受歡迎的Angular問題，本文提供了一個(gè)詳細(xì)的回答，那就是構(gòu)造函數(shù)和ngOnInit之間的差異。本文給出了一個(gè)全面的比較，突出了用法上的差異，并對(duì)組件初始化過程進(jìn)行了分析。

Angular Air 上有趣的插曲

我還強(qiáng)烈推薦觀看Angular Air episode，我在這里討論視圖層的內(nèi)部表示和更改檢測(cè)渲染部分。我也揭示了zones 和使用ChangeDetectorRef變化檢測(cè)手動(dòng)控制相關(guān)的一些常見的誤解

關(guān)于Angular內(nèi)幕的實(shí)物書

我開始寫一本關(guān)于Angular內(nèi)幕的綜合書。它將被稱為“Angular內(nèi)幕，框架結(jié)構(gòu)的最終指南”，并將對(duì)編譯器、視圖、DI和更改檢測(cè)機(jī)制如何在引擎蓋下工作進(jìn)行深入的解釋。我還計(jì)劃在調(diào)試或優(yōu)化工作時(shí)，包含一些真實(shí)的示例，說明在虛擬機(jī)引導(dǎo)下實(shí)現(xiàn)的知識(shí)可能會(huì)有什么幫助。這本書大約有150到200頁(yè)長(zhǎng)，有很多圖表便于理解材料。如果你感興趣的話，你會(huì)買一本關(guān)于Angular內(nèi)幕的書嗎？文章提供了更多關(guān)于這本書的信息，并包含一個(gè)訂閱表格，你可以用它告訴我你有興趣買這本書。

感謝您的閱讀! 如果喜歡這篇文章, 請(qǐng)點(diǎn)贊。它對(duì)我意義重大，它能幫助其他人看到這篇文章。對(duì)于更高級(jí)的文章，你可以在Twitter或Medium上跟隨我。

參考資源

These 5 articles will make you an Angular Change Detection expert