變化偵測從 Angular zone.js) 到 Angular (provideExperimentalZonelessChangeDetection) 的演變

更改偵測是 Angular 的一個基本面，負責識別和更新 DOM 中因資料修改或使用者互動而發生變更的部分。此過程可確保 UI 與底層資料保持一致，從而增強使用者體驗和應用程式效能。

Zone.js 的作用

從歷史上看，Angular 一直依賴 Zone.js 來實現其變更偵測機制。 Zone.js 是一個攔截非同步操作的 JavaScript 函式庫，允許 Angular 監視變更並相應地觸發更新。但是，包含 Zone.js 可能會增加應用程式的開銷，特別是在非同步活動頻繁的場景中。

變更偵測策略

Angular 提供了兩種主要的變化偵測策略：

• 預設： 在每個生命週期鉤子之後觸發變更偵測，例如 ngOnInit 或 ngAfterViewInit。這種策略很簡單，但可能會導致不必要的 DOM 更新，尤其是在大型應用程式中。

@Component({
  selector: 'app-my-component',
  template: `
    <p>{{ message }}</p>
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

這種策略比較容易實現，因為 Angular 會自動處理大部分變化偵測邏輯。
這種變更檢測策略的最大挑戰是它會導致不必要的 DOM 更新，這對於大型應用程式至關重要。

• OnPush： 僅當輸入屬性或非同步可觀察值發生變更時才會觸發變更偵測。此策略對於資料更新頻繁的複雜元件效能更高，但需要更多的手動管理。

@Component({
  selector: 'app-my-component',
  template: `
    <p>{{ message }}</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

雖然 onPush 變更偵測策略最大限度地減少了不必要的 DOM 操作，但 onPush 變更策略的最大挑戰是開發人員必須進行更多的手動管理並手動觸發變更。在某些情況下，例如當資料間接變更或使用可變物件時，他們必須使用changeDetectorRef.detectChanges()明確處理變更偵測。

Angular 18 和混合變化檢測：無區域方法

為了解決與 Zone.js 相關的挑戰，Angular 18 引入了一項稱為混合變更檢測的實驗性功能。這種方法旨在完全消除 Zone.js，使用新的更改檢測機制來檢測變更並操作 DOM。

啟用混合變更偵測：

要啟用混合變更偵測，您可以使用以下程式碼：

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

這將在以下場景中觸發更改偵測：

• 訊號已更新。
• changeDetectorRef.markForCheck() 被呼叫。
• 透過 AsyncPipe 訂閱的 observable 會收到一個新值。
• 組件被附加或分離。
• 已設定輸入。

啟用混合變更偵測後，您可以安全地從應用程式的 polyfill 中刪除 Zone.js。

 "polyfills": [
              "zone.js" //remove this line
            ],

混合變化檢測的好處

• 改進的效能：消除 Zone.js 可以減少開銷，從而提高效能，特別是在具有大量非同步操作的應用程式中。

• 增強的開發人員體驗：取消手動更改檢測簡化了開發並降低了錯誤的可能性。

• 較小的應用程式大小：Zone.js 通常會增加約 13KB 的應用程式大小。刪除它可能會導致套件變小。

以上是變化偵測從 Angular zone.js) 到 Angular (provideExperimentalZonelessChangeDetection) 的演變的詳細內容。更多資訊請關注PHP中文網其他相關文章！