當前位置:編程學習大全網 - 源碼下載 - 深入理解Angular的變更檢測

深入理解Angular的變更檢測

這是壹篇偏理論的文章,Angular的變更檢測是這個框架的靈魂,如果我們深入理解這裏邊的內容,對於優化程序,解決性能問題,以及對Angular的深入理解都有很好的幫助,本文涉及到的知識點主要有: , , 。

Angular有自己的zone,就是我們常見的ngZone,Angular 源碼中有壹個東西叫做 ApplicationRef,它監聽 NgZone 的 onTurnDone 事件。只要這個事件發生,它就執行 函數,這個函數執行變更檢查,DOM就會更新,看下圖示例,其實zone.js就是 。

在 Angular 中,每個組件都有自己的變更檢測器(change detector)。因為我們可以單獨控制每個組件的變更檢查何時發生以及如何執行,既然每個組件都有自己的 ,並且壹個 Angular 應用包含著壹個組件樹,那麽邏輯上我們也有壹個 (change detector tree)。這棵樹也可以被看成是壹個 ,該有向圖的數據總是從頂端流向底端(單向數據流)。

其實每個視圖(組件)都有壹個狀態,也是非常重要的角色,因為根據它的值(FirstCheck、 ChecksEnabled、Errored、Destoryed),Angular決定是否對視圖及其所有子視圖運行或跳過臟值檢測。如果ChecksEnabled是false或者視圖是Errored或者Destroyed的狀態,變更檢測將會跳過這個視圖以及它的子視圖。

此默認策略,就是我們常提到的臟檢查,它是只要有變化,就從 根組件 到 所有子組件 進行檢查(深度優先遍歷)

如上默認的變更檢測,Angular必須每次都檢測所有組件,但是如果我們可以讓Angular僅對應用中發生改變的狀態進行變更檢測,那樣會更高效,壹般我們會從下邊↓兩個方向上著手,實現更加高效且聰明的變更檢測。

使用方法如下:

通過引用 ,可以手動去操作變化檢測。我們可以在組件中的通過依賴註入的方式來獲取該對象:

此變更檢測對象提供了如下所示的方法

,那麽變化檢測不會再次執行,除非手動調用該方法, 在程序中使用this.changeRef.markForCheck() 變化檢測,如要想要執行多次多次,則需要多次的運行這句話。具體的執行流程如下:

首先他的使用與是否使用了onPush無關,他是只在當前視圖和它的子視圖 ,應用場景:明確知道有數據的更新,需要Angular執行變更檢測的時候使用。

首先他的使用與是否使用了onPush無關,他是從變化檢測樹中 ,該組件的變化檢測器將不再執行變化檢測,同時其子組件也不會執行檢測,除非手動調用 reattach() 方法

首先他的使用與是否使用了onPush無關,他是 ,使得該組件及其子組件都能執行變化檢測,但是如果當前的組件的父組件 (臟檢查)的話,它將 。

當父組件的輸入屬性是用observable,那麽除了使用this.changeRef.markForCheck()來進行變更檢測,我們還可以在子組件中使用async pipe, 發出壹個新值時,異步管道會將組件標記為要檢查更改(其實也是調用了 this.changeRef.markForCheck())

通過壹個示例更好的理解這兩個方法的區別:

示例解析:

如果大家想真正了解Angular的變更檢測,壹定要動手寫壹寫相關的demo去驗證自己的猜想,否則就像之前的我壹樣,看了很多理論,還是不能夠了解,而且還很容易弄混ChangeDetectorRef的屬性~ 希望大家看到這篇文章可以更加清晰點吧~

  • 上一篇:棋盤網站源代碼
  • 下一篇:OAuth2.0-JWT令牌
  • copyright 2024編程學習大全網