訊號的 Local Change Detection

angular signal change detection

connieleung 2025-02-17 07:52:52 ‧ 1447 瀏覽

分享至

Change Detection 的歷史

Angular 團隊在企業應用程式的效能方面做出了許多改進。組件中的 Change Detection 的預設值是ChangeDetection.Default。這意味著組件無論其狀態如何，總是運行 Change Detection。當使用預設值時，未修改的元件必須不必要地執行 Change Detection。當應用程式具有大型元件樹 (component tree) 時，這可能會損害應用程式的效能，其中一個變更可能會觸發所有元件執行 Change Detection。

然後，團隊引入了 OnPush change strategy，減少了組件樹中組件之間的 change detection 次數。

@Component({
 selector: 'app-on-push-grand-child',
 template: `...inline template…`,
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushGrandChildComponent {}

當元件加入 changeDetection: ChangeDetectionStrategy.OnPush 時，它使用 OnPush change strategy 來執行 change detection。在以下情況下，元件將運行 change detection：

它接收新的輸入，或
由 AsyncPipe 解析的 Observable，或者
它運行一個 event listener，或者
訊號更新。

OnPush change strategy 優化了效能，但 Angular 17 引入了 local change detection (局部變化偵測)，它只會更新訊號更新的元件，而忽略元件樹的其餘部分。

Default Change Strategy（始終運行）

Change strategy 的預設值為 Default。當元件具有 Default change strategy 時，無論是否已修改，change detection 都會運作。我們舉個例子來解釋一下。

export function getCurrentTime(): string {
   return new Date(Date.now()).toISOString();
}

@Component({
 selector: 'app-default-grand-child',
 template: `
     <p>{{ showCurrentTime() }}</p>
     <p>Counter: {{ count() }}</p>
     <button (click)="add()">Add</button>`
})
export class DefaultGrandChildComponent {
  count = signal(0);
  
  add(delta=1) {
   this.count.update((prev) => prev + delta);
  }

  showCurrentTime() {
    return getCurrentTime();
  }
}

DefaultGrandChildComponent 元件具有 Default change strategy。它有一個增加 count 訊號的按鈕，showCurrentTime 方法顯示當前時間。

@Component({
 selector: 'app-default-child',
 imports: [DefaultGrandChildComponent],
 template: `
    <p>{{ showCurrentTime() }}</p>
    <p>Internal Count: {{ count() }}</p>
    <button (click)="add()">Add</button>
    <app-default-grand-child />`
})
export class DefaultChildComponent {
  count = signal(0);
  
  add(delta=1) {
    this.count.update((prev) => prev + delta);
  }

  showCurrentTime() {
    return getCurrentTime();
  }
}

DefaultChildComponent 元件也具有 Default change strategy，並且是 DefaultGrandChildComponent 元件的父元件。類似地，它有一個按鈕來增加 count 訊號和 showCurrentTime 來顯示當前時間。

@Component({
 selector: 'app-root',
 imports: [OnPushChildComponent, DefaultChildComponent],
 template: `
     <p>{{ showCurrentTime() }}</p>
     <button (click)="counterService.add()">Add CounterService value</button>
      <app-on-push-child />
      <app-on-push-child />
      <app-default-child />    
`,
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
 counterService = inject(CounterService);

 showCurrentTime() {
   return getCurrentTime();
 }
}

AppComponent 是 DefaultChildComponent 元件的父元件，它有 OnPush change strategy。

場景 1：按鈕點選發生在 DefaultGrandChildComponent 元件中

該元件被標記為 dirty。當偵測到變化時，此元件會增加 count 訊號並顯示當前時間。 DefaultChildComponent 元件是其父元件；因此，DefaultChildComponent 被標記為 dirty。 AppComponent 是 DefaultChildComponent 元件的父元件；因此，它被標記為 dirty。 OnPushChildComponent 的 change strategy 是 OnPush；它沒有接收新的輸入，event listener 沒有運行，沒有 AsyncPipe，也沒有更新訊號。因此，它不會被標記為 dirty，並且其子樹 (subtree) 會被忽略。

當 change detection 發生時，AppComponent、 DefaultChildComponent 和 DefaultGrandChildComponent 元件會更新。

場景二：按鈕點選發生在DefaultChildComponent元件中

類似地，DefaultChildComponent 和 AppComponent 元件也被標記為 dirty。 DefaultGrandChildComponent 具有 Default change strategy；因此，儘管其狀態沒有改變，但它被標記為 dirty。

當 change detection 發生時，AppComponent、DefaultChildComponent 和 DefaultGrandChildComponent 元件會更新。 Default change strategy 效能不佳，因為 DefaultChildComponent 的子樹 (subtree) 始終運行。當其子樹增長時，應用程式會變得緩慢，因為所有元件都被標記為 dirty，並且更新所有元件。

OnPush 變更策略（效能最佳化）

@Injectable({
 providedIn: 'root'
})
export class CounterService {
 private readonly value = signal(0);
 readValue = this.value.asReadonly();

 add(delta=1) {
   this.value.update((prev) => prev + delta);
 }
}

CounterService 服務具有 add 方法增加的 value 訊號。 readValue 是 value 訊號的唯讀訊號。

@Component({
 selector: 'app-on-push-grand-child',
 template: `
     <p>{{ showCurrentTime() }}</p>
     <p>Internal Counter: {{ count() }}</p>
     <p>Counter Service value: {{ counterService.readValue() }}</p>
     <button (click)="add()">Add</button>
 `,
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushGrandChildComponent {
 count = signal(0);
 counterService = inject(CounterService);
 
 add(delta=1) {
   this.count.update((prev) => prev + delta);
 }

 showCurrentTime() {
   return getCurrentTime();
 }
}

OnPushGrandChildComponent 元件具有 OnPush change strategy。它有一個增加 count 訊號的按鈕，showCurrentTime 方法顯示當前時間。此外，它還注入了 CounterService 來顯示 readValue 訊號的值。

@Component({
 selector: 'app-on-push-child',
 imports: [OnPushGrandChildComponent],
 template: `
     <p>{{ showCurrentTime() }}</p>
     <p>Internal Count: {{ count() }}</p>
     <button (click)="add()">Add</button>
     <app-on-push-grand-child />
 `,
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushChildComponent {
 count = signal(0);
  
 add(delta=1) {
   this.count.update((prev) => prev + delta);
 }
 
 showCurrentTime() {
   return getCurrentTime();
 }
}

OnPushChildComponent 元件也具有 OnPush change strategy，並且是 OnPushGrandChildComponent 元件的父元件。類似地，它有一個按鈕來增加 count 訊號和 showCurrentTime 方法來顯示當前時間。

場景 1：按鈕點選發生在 OnPushGrandChildComponent 元件中

該元件被標記為 dirty。當偵測到變化時，此元件會增加 counter 訊號並顯示當前時間。 OnPushChildComponent 是它的父元件；因此，OnPushChildComponent 被標記為 dirty。 AppComponent 是 OnPushChildComponent 元件的父元件；因此，它被標記為 dirty。 DefaultChildComponent 的 change strategy 是 Default；它的子樹 (subtree) 總是被更新。

當 change detection 發生時，AppComponent、DefaultChildComponent、DefaultGrandChildComponent、OnPushChildComponent 和 OnPushGrandChildComponent 元件都會更新。

場景二：按鈕點擊發生在 OnPushChildComponent 元件中

類似地，AppComponent 和 DefaultChildComponent 的子樹也被標記為 dirty。 OnPushGrandChildComponent 具有 OnPush change strategy，並且不符合任何 change detectio 標準。它沒有接收新的輸入，沒有運作 event listener，沒有 AsyncPipe，也沒有訊號更新；因此，它沒有被標記為 dirty。

當變更偵測發生時，AppComponent、DefaultChildComponent、DefaultGrandChildComponent 和 OnPushChildComponent 元件會更新。 OnPush change strategy 優化了應用程式的效能，因為當子樹 (subtree) 不符 change detection 標準時，它們不會執行 change detection。當子樹增長時，只有根和觸發事件的元件之間的元件才會被標記為 dirty 並更新。受影響組件的數量顯著減少。

本地變化檢測 (Local Change Detection)

在 Angular 17 中，團隊為訊號添加了 local change detection。訊號更新時，只有一個組件被標記為 dirty 並更新。

@Component({
 selector: 'app-root',
 imports: [OnPushChildComponent, DefaultChildComponent],
 template: `
     <p>{{ showCurrentTime() }}</p>
     <button (click)="counterService.add()">Add CounterService value</button>
     <div class="child" >
         <app-on-push-child />
         <app-on-push-child />
         <app-default-child />
     </div>
   </div>
 `,
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
 counterService = inject(CounterService);

 showCurrentTime() {
   return getCurrentTime();
 }
}

當 AppComponent 元件點擊按鈕時，它會增加 CounterService 的 value 訊號。由於運行了 event listener，因此它被標記為 dirty。

@Component({
 selector: 'app-on-push-grand-child',
 template: `
     <p>{{ showCurrentTime() }}</p>
     <p>Counter Service value: {{ counterService.readValue() }}</p>
     <button (click)="add()">Add</button>
   </div>
 `,
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushGrandChildComponent {
  count = signal(0);
  counterService = inject(CounterService);
  
  add(delta=1) {
     this.count.update((prev) => prev + delta);
   }

   showCurrentTime() {
      return getCurrentTime();
   }
}

OnPushGrandChildComponent 元件在模板中顯示 CounterService 的 value 訊號；因此將其標記為dirty。它的父元件 OnPushChildComponent 並未因為 local change detection 而被標記為 dirty 元件。

假設 DefaultChildComponent 和 DefaultGrandChildComponent 不存在，則只更新 AppComponent 和 OnPushGrandChildComponent 元件。如果在 OnPushChildComponent 和 OnPushGrandChildComponent 之間插入更多元件，local change detection 將確保這些元件不會被標記為 dirty。 Change detection 的數量固定為三個；一個用於 AppComponent，另外兩個用於兩個 OnPushGrandChildComponent 元件。

我們應該從 local change detection 中獲益，並在現代 Angular 開發中使用訊號來實現 reactivity，

參考：

Skipping subtrees - OnPush: https://angular.dev/best-practices/skipping-subtrees
Location Change Detection by nivek: https://www.youtube.com/watch?v=Zhj5rSbir84
Local Change Detection by Rainer Hahnekamp: https://medium.com/ngconf/local-change-detection-in-angular-410d82b38664
Stackblitz Demo: https://stackblitz.com/edit/stackblitz-starters-t6r5bnyv?file=src%2Fmain.ts

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22211 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js