資訊專欄INFORMATION COLUMN
摘要：編寫工作首先介紹了一個稱為的內(nèi)部組件表示，并解釋了變更檢測過程在視圖上運行。本文主要由兩部分組成第一部分探討錯誤產(chǎn)生的原因，第二部分提出可能的修正。它對我意義重大，它能幫助其他人看到這篇文章。
在過去的8個月里，我大部分空閑時間都是reverse-engineering Angular。我最感興趣的話題是變化檢測。我認為它是框架中最重要的部分，因為它負責像DOM更新、輸入綁定和查詢列表更新這樣的“可視”工作。我的探索產(chǎn)生了一系列深入的文章，突出了變化檢測機制的主要思想，深入了解它的實現(xiàn)細節(jié)。在這篇文章中，我把它們放在一起，簡短地描述了每一個你能找到什么。一旦你讀完它們，你將獲得變化檢測啟發(fā)?。
理解變化檢測下面是5篇深入研究的文章，它們將極大的擴展你所知道的Angular變化檢測過程的范圍。每篇文章建立在前一個解釋的信息基礎(chǔ)上，所以我建議你按照他們在這里列出的順序閱讀它們。
Angular’s $digest is reborn in the newer version of Angular
這篇文章把AngularJS的digest過程和Angular的變化檢測進行了對比。它解釋了對兩者的需求，并說明如何使用相同的臟檢查概念來構(gòu)建它們。然后提供了一些例子，論證了Angular的生命周期鉤子如何作為相同的機制在AngularJS的$watch中進行使用。它還表明了Angular現(xiàn)在所謂的從上到下的單項數(shù)據(jù)流不同于AngularJS 。文章解釋了這個強制執(zhí)行背后的原因以及它對架構(gòu)的好處和限制。本文將對那些正尋找遷移到Angular有AngularJS經(jīng)驗的開發(fā)者是非常有用的。
Do you still think that NgZone (zone.js) is required for change detection in Angular?
這篇文章描述了NgZone是如何在zone.js這個庫上實施的以及NgZone 在這個框架上扮演的角色。與通常的觀點相反，它不是變化檢測過程的一部分，而是用來觸發(fā)它的。文章首先說明Angular可以檢測變化進行渲染，沒有ngzone和zone.js，進而說明NgZone帶來的價值以及它如何實現(xiàn)的。文章的大部分內(nèi)容是解釋常用的公共API如isStable, onUnstable 和 onMicrotaskEmpty。文章最后解釋了當使用第三方庫的時候比如GoogleAPI一些常見的不會被檢測到的變化陷阱。
Everything you need to know about change detection in Angular
如果您想深入了解變更檢測機制，這篇文章是必讀的。它提供了如何使用相關(guān)鏈接進行進一步探索的高級概述。編寫工作首先介紹了一個稱為View的內(nèi)部組件表示，并解釋了變更檢測過程在視圖上運行。然后，它列出了在執(zhí)行順序的變化檢測期間執(zhí)行的所有操作的列表。這些操作包括更新視圖狀態(tài)、渲染、處理輸入綁定和調(diào)用生命周期鉤子。最后它解釋了ChangeDetectorRef 公共的API如detach, detectChanges 和 markForCheck以及提供了方法用法的簡短示例。
The mechanics of DOM updates in Angular
本文深入探討了與DOM的同步應(yīng)用模型中的實現(xiàn)細節(jié)，即單向數(shù)據(jù)綁定或DOM渲染。此操作在變更檢測過程中占據(jù)中心位置，因為它正是使組件在DOM渲染中呈現(xiàn)變化的原因。本文首先介紹了關(guān)于View(視圖)概念的附加細節(jié)，特別是View Factory (視圖工廠)和幾個基本類型的View Nodes(視圖節(jié)點)。然后，它展示了變更檢測機制如何通過對這些節(jié)點進行插值或輸入綁定來執(zhí)行DOM更新設(shè)置。
The mechanics of property bindings update in Angular
與前面關(guān)于DOM更新的文章類似，這篇文章探討了負責更新子組件和指令的輸入綁定的過程的實現(xiàn)細節(jié)。它引入了綁定定義的概念及其在變化檢測過程中的作用。然后，它將演示編譯器在處理屬性綁定的模板語法時，如何生成這些綁定定義。最后，它概述了在視圖節(jié)點上運行變化檢測和更新子組件和指令的輸入屬性的一個循序漸進的過程。
避免常見的困惑這里是另外一些有價值的文章列表，可以解釋我在stackoverflow經(jīng)?？吹降年P(guān)于變化檢測的一些困惑。
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)常被誤解的錯誤背后的原因和機制。雖然有些開發(fā)人員認為它是一個bug，但實際上這是一個設(shè)計決策，通過將變更檢測運行限制為單個運行，而不是AngularJS中的多次運行($digest runs)，從而提高性能。本文解釋了如何拋出錯誤有助于防止模型數(shù)據(jù)和UI之間的不一致，從而將錯誤或舊數(shù)據(jù)顯示給頁面上的用戶。本文主要由兩部分組成：第一部分探討錯誤產(chǎn)生的原因，第二部分提出可能的修正。它還解釋了為什么不在生產(chǎn)模式中拋出錯誤。
If you think ngDoCheck means your component is being checked
本文對于為什么使用OnPush策略組件的ngDoCheck周期鉤子被引發(fā)即使對這些組件的輸入綁定沒有改變提供了一個詳細的回答。它解釋了通常未預(yù)料到的事實：當父組件被選中時，鉤子會觸發(fā)子組件，并顯示該機制是如何觸發(fā)ngDoCheck的，即使看起來沒有理由這樣做。文章的第二部分通過演示幾個用例回答了我們需要ngDoCheck的問題。
The essential difference between Constructor and ngOnInit in Angular
關(guān)于在stackoverflow有超過10萬看法的最受歡迎的Angular問題，本文提供了一個詳細的回答，那就是構(gòu)造函數(shù)和ngOnInit之間的差異。本文給出了一個全面的比較，突出了用法上的差異，并對組件初始化過程進行了分析。
Angular Air 上有趣的插曲我還強烈推薦觀看Angular Air episode，我在這里討論視圖層的內(nèi)部表示和更改檢測渲染部分。我也揭示了zones 和使用ChangeDetectorRef變化檢測手動控制相關(guān)的一些常見的誤解
關(guān)于Angular內(nèi)幕的實物書我開始寫一本關(guān)于Angular內(nèi)幕的綜合書。它將被稱為“Angular內(nèi)幕，框架結(jié)構(gòu)的最終指南”，并將對編譯器、視圖、DI和更改檢測機制如何在引擎蓋下工作進行深入的解釋。我還計劃在調(diào)試或優(yōu)化工作時，包含一些真實的示例，說明在虛擬機引導下實現(xiàn)的知識可能會有什么幫助。這本書大約有150到200頁長，有很多圖表便于理解材料。如果你感興趣的話，你會買一本關(guān)于Angular內(nèi)幕的書嗎？文章提供了更多關(guān)于這本書的信息，并包含一個訂閱表格，你可以用它告訴我你有興趣買這本書。
感謝您的閱讀! 如果喜歡這篇文章, 請點贊。 它對我意義重大，它能幫助其他人看到這篇文章。 對于更高級的文章，你可以在Twitter或Medium上跟隨我。
參考資源These 5 articles will make you an Angular Change Detection expert
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90271.html
摘要：感謝您的閱讀如果喜歡這篇文章請點贊。它對我意義重大，它能幫助其他人看到這篇文章。對于更高級的文章，你可以在或上跟隨我。 I’ve worked with Angular.js for a few years and despite the widespread criticism I think this is a fantastic framework. I’ve started w...
摘要：但如果一個組件在生命周期鉤子里改變父組件屬性，卻是可以的，因為這個鉤子函數(shù)是在更新父組件屬性變化之前調(diào)用的注即第步，在第步之前調(diào)用。 原文鏈接：Angular.js’ $digest is reborn in the newer version of Angular showImg(https://segmentfault.com/img/remote/146000001468785...
摘要：單向數(shù)據(jù)流向保證了高效可預(yù)測的變化檢測。變化檢測策略有兩種變化檢測策略。另一種更加高效的變化檢測方式。策略，就是只有當輸入數(shù)據(jù)即的引用發(fā)生變化或者有事件觸發(fā)時，組件才進行變化檢測。 概述 簡單來說變化檢測就是Angular用來檢測視圖與模型之間綁定的值是否發(fā)生了改變，當檢測到模型中綁定的值發(fā)生改變時，則同步到視圖上，反之，當檢測到視圖上綁定的值發(fā)生改變時，則回調(diào)對應(yīng)的綁定函數(shù)。 什么情...
摘要：策略減少檢測次數(shù)當輸入屬性不變時，可以跳過整個變更檢測子樹?，F(xiàn)在當執(zhí)行更改檢測時，它將從上到下進行。并且一旦更改檢測運行結(jié)束，它將恢復整個樹的狀態(tài)。 Angular 2.x+ 臟檢查機制理解 目前幾種主流的前端框架都已經(jīng)實現(xiàn)雙向綁定特性，但實現(xiàn)的方法各有不同： 發(fā)布者-訂閱者模式（backbone.js） 臟值檢查（angular.js） 數(shù)據(jù)劫持 + 發(fā)布者-訂閱者模式（vue.j...
摘要：本文將解釋引起這個錯誤的內(nèi)在原因，檢測機制的內(nèi)部原理，提供導致這個錯誤的共同行為，并給出修復這個錯誤的解決方案。這一次過程稱為。這個程序設(shè)計為子組件拋出一個事件，而父組件監(jiān)聽這個事件，而這個事件會引起父組件屬性值發(fā)生改變。 原文鏈接：Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedE...
閱讀 1921·2021-09-23 11:21
閱讀 1705·2019-08-29 17:27
閱讀 1063·2019-08-29 17:03
閱讀 731·2019-08-29 15:07
閱讀 1929·2019-08-29 11:13
閱讀 2386·2019-08-26 12:14
閱讀 933·2019-08-26 11:52
閱讀 1737·2019-08-23 17:09
