ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

変化検出とは何ですか? Angularの変更メカニズムについて話しましょう

著者：Eve Cole 更新時間：2022-06-02 14:05:53

変化検出とは何ですか?次の記事では、Angular の変更検出メカニズムについて説明し、ステータス変更が変更検出を通知する仕組みと、Angular の変更検出戦略について説明します。

1. 変化検出とは何ですか?

  • 概要: コンポーネント ツリーを横断し、各コンポーネントの変更をチェックし、コンポーネントのプロパティが変更されたときにDOM更新をトリガーする変更检测机制。 【おすすめ関連チュートリアル：「angularチュートリアル」】

  • 変更検出の基本タスク: プログラムの内部状态を取得し、可见します。この状態は、任意のオブジェクト、配列、または基本データ型にすることができます。

2. 変化の原因は何ですか?

イベント駆動型ソースは、次の 3 つのカテゴリに分類されます。

  • イベント: ページのクリック、送信、マウス ダウン...

  • XHR: バックエンドサーバーからデータを取得します

  • タイマー: setTimeout()、setInterval()

これらの点には 1 つの共通点があります。それは、すべて非同期であるということです。つまり、すべての异步操作データ変更を引き起こす可能性のある根本要因であるため、非同期操作が実行されるたびに、アプリケーションの状態が変化する可能性があります。現時点では、ビューを更新する必要があります

3. 状態変化の変化検知を通知する方法

Angular Angular のすべての异步事件監視するNgZoneが接続されており、Angular は起動時に基盤となるブラウザー API の一部を ( Zone.jsを通じて) 書き換えます (すべての非同期イベントを強力にインターセプトします)。

変更検出をトリガーするには 2 つの一般的な方法があります。1 つはコンポーネントのライフサイクル フックに基づく方法です。

 ngAfterViewChecked() {
console.log('cluster-master.component cd');
}

もう 1 つの方法は、変更検出のオンまたはオフを手動で制御し、手動でトリガーすることです。

コンストラクター(プライベート cd: ChangeDetectorRef) {
cd.detach()
setInterval(() => {
this.cd.detectChanges()
}、5000)
}

3. 角度変化検出

Angular の核心はコンポーネント化であり、コンポーネントの入れ子は最終的に组件树を形成します。各コンポーネントには対応する变化检测器ChangeDetectorがあり、これらの変更検出器もツリーを形成すると考えられます。
Angular では、各コンポーネントに独自の変更検出機能があり、各コンポーネントに対して変更検出をいつどのように実行するかを制御できます。

4. 変化検出戦略

Angular を使用すると、開発者は変更検出戦略をカスタマイズすることもできます。

  • デフォルト:每次変更検出により、其他组件の状態変化や本组件

  • Onpush:满足一些条件限り、各変更検出はこのコンポーネントの変更チェックをスキップします。

4.1 デフォルト

Angular のデフォルトの変更検出メカニズムはChangeDetectionStrategy.Defaultです。各非同期イベント コールバックが終了すると、NgZone は整个组件树をトリガーして至上而下

4.2 onPush

OnPush 戦略。コンポーネントとその下の所有子组件の変更検出を跳过ために使用されます。

実際、 OnPushポリシーを設定した後でも、変更検出をトリガーする方法は数多くあります。

  • 1) コンポーネントの@Input属性の引用変更されます。

  • 2) コンポーネント内のDOMイベント ( click、submit、mouse downなどのサブコンポーネントの DOM イベントを含む)。

  • 3) コンポーネント内のObservableイベントをサブスクライブし、同時にAsync pipeを設定します。

  • 4) コンポーネントでChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()メソッドを手動で使用します。

5. 変更検出オブジェクト参照

  • markForCheck():该子组件到根组件子组件に使用され、変更検出戦略がonPushに設定されている場合でも、次の変更検出中にこのパス上のコンポーネントをチェックする一定角度検出器に通知します。

  • detectChanges():该组件到各个子组件変更検出を手動で開始します

  • detach(): コンポーネントの検出器を多数の検出器から脱离、再接続しない限り検出メカニズムによって制御されなくなります。

  • reattach(): 切り離された検出器を検出器ツリーに重新链接

関連記事