Angularzone.js) から Angular (provideExperimentalZonelessChangeDetection) への変更検出の進化

変更検出は Angular の基本的な側面であり、データの変更やユーザーの操作に応じて変更された DOM の部分を特定して更新する役割を果たします。このプロセスにより、UI と基礎となるデータの一貫性が確保され、ユーザー エクスペリエンスとアプリケーションのパフォーマンスが向上します。

Zone.js の役割

歴史的に、Angular は変更検出メカニズムとして Zone.js に依存してきました。 Zone.js は、非同期操作をインターセプトする JavaScript ライブラリで、Angular が変更を監視し、それに応じて更新をトリガーできるようにします。ただし、Zone.js を含めると、特に非同期アクティビティが頻繁に行われるシナリオでは、アプリケーションにオーバーヘッドが追加される可能性があります。

変化検出戦略

Angular は 2 つの主要な変更検出戦略を提供します。

• デフォルト: 変更検出は、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 ではハイブリッド変更検出として知られる実験的な機能が導入されました。このアプローチは、新しい変更検出メカニズムを使用して変更を検出し、DOM を操作することで、Zone.js を完全に排除することを目的としています。

ハイブリッド変更検出の有効化:

ハイブリッド変更検出を有効にするには、次のコードを使用できます:

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

これにより、次のシナリオで変更検出がトリガーされます:

• シグナルが更新されます。
• changeDetectorRef.markForCheck() が呼び出されます。
• AsyncPipe でサブスクライブされたオブザーバブルは新しい値を受け取ります。
• コンポーネントがアタッチまたはデタッチされます。
• 入力が設定されています。

ハイブリッド変更検出を有効にすると、アプリケーションのポリフィルから Zone.js を安全に削除できます。

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

ハイブリッド変更検出の利点

• パフォーマンスの向上: Zone.js を削除するとオーバーヘッドが削減され、特に非同期操作が多いアプリケーションでのパフォーマンスの向上につながります。

• 開発者エクスペリエンスの強化: 手動による変更検出の削除により、開発が簡素化され、エラーの可能性が減少します。

• アプリケーション サイズの縮小: Zone.js では通常、アプリケーション サイズが約 13 KB 追加されます。これを削除すると、バンドルが小さくなる可能性があります。

以上がAngularzone.js) から Angular (provideExperimentalZonelessChangeDetection) への変更検出の進化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。