前言
Angular 除了默認(rèn)的變化檢測機(jī)制，也提供了ChangeDetectionStrategy.OnPush，用 OnPush 可以跳過某個組件或者某個父組件以及它下面所有子組件的變化檢測。
在本文中，我們將探討Angular中的變更檢測機(jī)制，并通過示例代碼來說明其工作原理。
變更檢測的原理
當(dāng)我們在 model 中改變數(shù)據(jù)時，框架層需要知道：
-
model 哪里發(fā)生了改變
-
view 中哪里需要更新
當(dāng)Angular應(yīng)用運行時，它會周期性地檢查組件及其綁定屬性的狀態(tài)是否發(fā)生了變化，并相應(yīng)地更新視圖。這個過程稱為變更檢測。
整個angular app 是個組件樹，不可能任意一個組件中的數(shù)據(jù)發(fā)生變化，所有的組件都更新，性能比較低。
為此，Angular提供了兩種變更檢測策略：默認(rèn)的臟檢查和OnPush策略。
臟檢查
臟檢查是Angular默認(rèn)采用的變更檢測策略。它通過比較對象的舊值和新值來檢測變化。當(dāng)組件中的某個屬性發(fā)生變化時，Angular會標(biāo)記這個組件為“臟”，并觸發(fā)變更檢測過程。在變更檢測過程中，Angular會遞歸遍歷組件樹，檢查每個組件及其綁定屬性是否發(fā)生了變化，并更新相應(yīng)的視圖。
雖然臟檢查是一種靈活的變更檢測策略，但它也可能導(dǎo)致性能問題。因為每次變更檢測都需要遍歷整個組件樹，當(dāng)應(yīng)用規(guī)模較大時，性能開銷會變得非常顯著。
OnPush策略
為了解決臟檢查可能帶來的性能問題，Angular引入了OnPush策略。這種策略通過明確告訴Angular哪些組件是純粹的（pure）來提高性能。純組件只在它們的輸入屬性發(fā)生變化時才被視為“臟”，從而觸發(fā)變更檢測。
要使用OnPush策略，我們需要將組件的changeDetection屬性設(shè)置為ChangeDetectionStrategy.OnPush。此外，我們還需要注意，輸入屬性必須是不可變（immutable）的，即不能直接修改其值，而是應(yīng)該返回一個新的對象。
示例代碼
下面是一個簡單的示例，演示了如何使用Angular的變更檢測機(jī)制。假設(shè)我們有一個名為UserComponent的組件，其中包含一個名為user的輸入屬性。
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-user',
template: `
<div>
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserComponent {
@Input() user: User;
}
在上面的代碼中，我們使用了changeDetection: ChangeDetectionStrategy.OnPush來啟用OnPush策略。這意味著當(dāng)user輸入屬性發(fā)生變化時，才會觸發(fā)變更檢測。
除此之外，我們還需要定義一個User類來表示用戶對象：
export class User {
constructor(public name: string, public email: string) {}
}
在父組件中，我們可以隨時修改user屬性的值，并觀察變更檢測的效果：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-user [user]="currentUser"></app-user>
<button (click)="changeUser()">Change User</button>
`,
})
export class AppComponent {
currentUser: User = new User('John Doe', 'john@example.com');
changeUser() {
this.currentUser = new User('Alice Smith', 'alice@example.com');
}
}
通過點擊“Change User”按鈕，我們可以看到視圖中顯示的用戶名和郵箱地址實時更新。
此外，我們還可以借助ChangeDetectorRef對象，主動觸發(fā)Angular的變更檢測。示例代碼如下：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-user [user]="currentUser"></app-user>
<button (click)="changeUser()">Change User</button>
`,
})
export class AppComponent {
currentUser: User = new User('John Doe', 'john@example.com');
constructor(
private cdr: ChangeDetectorRef
){}
changeUser() {
this.currentUser.name = 'Alice Smith';
this.currentUser.email = 'alice@example.co';
this.cdr.detectChanges();
}
}
總結(jié)
變更檢測是Angular框架的核心功能之一。通過臟檢查和OnPush策略，Angular能夠自動追蹤組件及其綁定屬性的變化，并更新相應(yīng)的視圖。
盡管臟檢查是默認(rèn)的檢測策略，但在性能要求較高的情況下，使用OnPush策略可以明顯降低Angular的變更檢測次數(shù)，從而顯著提升應(yīng)用的性能。文章來源：http://www.zghlxwxcb.cn/news/detail-797541.html
希望本文對您理解Angular的變更檢測機(jī)制有所幫助！文章來源地址http://www.zghlxwxcb.cn/news/detail-797541.html
到了這里，關(guān)于Angular系列教程之變更檢測與性能優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
