Change detection とは、Angularがコンポーネントのデータとの同期でDOMを保つ方法です—状態を変更する可能性のあるイベントの後、コンポーネントをチェックしてデータが変更された箇所でビューを更新します。デフォルトではこのチェックは広範ですが、OnPush はパフォーマンスのためにそれを狭めます。
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
デフォルトでは( 戦略)、Angularはすべてのイベントでを再チェックします—正しいですが、大きなツリーでは潜在的に無駄です。
Defaultimport { ChangeDetectionStrategy, Component } from "@angular/core";
@Component({
selector: "app-user",
changeDetection: ChangeDetectionStrategy.OnPush, // opt in
template: `{{ user.name }}`,
})
export class UserComponent {
@Input() user!: User;
}
OnPushでは、Angularはこれらのいずれかが起こらない限り、このコンポーネントのチェックをスキップします:
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
これは大きなツリーでの作業を大幅に削減できます—Angularは変更できないことがわかっているサブツリー全体を無視します。
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";
// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
OnPushはinputの参照変更に依存するため、状態を不変的に更新する必要があります(新しいオブジェクト/配列)。その場で変更することは古典的なOnPushバグです—ビューは更新されません。
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck(); // mark this component for the next check
this.cdr.detectChanges(); // run change detection now
Signalsは、さらに正確で細粒度な更新(変更されたシグナルを読むビューのみ)を可能にし、Zone.jsの完全削除を指し示しています。
変更検出はAngularのパフォーマンスの中核です。
デフォルト戦略がツリー全体をチェックすること—そして OnPush +不変データがチェックを実際に変更されたinputを持つコンポーネントに制限すること—を理解することが、大規模アプリを最適化するための主要なレバーです。
不変性の要件は「なぜビューが更新されないのか?」というバグの頻繁な原因であり、signalsはAngularが今後の更に細粒度で効率的なリアクティビティに向かっている場所を表しています。