Angularの検出を変更：知る必要があるすべて

角度変化検出メカニズムの詳細な分析

この記事では、Angularの変化検出メカニズムを詳細に調査し、その基礎となる運用原則を明らかにし、最適化戦略を提供します。この記事では、このトピックに関する情報は比較的少ないです。この記事では、最新のAngularバージョンに基づいてソースコードを分析し、以前のバージョン2.4.1の該当するコンテンツをカバーします。

コアコンセプト：表示（表示）

角度アプリケーションは、コンポーネントのみで構成されているのではなく、ツリーを表示します。各コンポーネントは、Angular UIアーキテクチャの基本単位であるビューに対応し、すべてのプロパティチェックとDOMの更新を処理する責任があります。ソースコードのビューの説明は次のとおりです。

ビューは、アプリケーションUIの基本的な構成要素です。一緒に作成され破壊された要素の最小のグループです。

ビュー内の要素のプロパティは変更できますが、ビュー内の要素の構造（数と順序）を変更することはできません。要素の構造を変更することは、ViewContainerRefを使用してネストされたビューを挿入、移動、または削除することによってのみ行うことができます。各ビューには、複数のビューコンテナを含めることができます。

この記事では、コンポーネントビューとコンポーネントの概念を同じ意味で使用します。多くのWeb記事とスタックオーバーフローの回答は、ここで説明されているビューを「変更検出オブジェクト」または「ChandereTectorRref」と呼ぶことに注意してください。実際、Angularに個別の変更検出オブジェクトはありません。変化検出は、ビューに直接作用します。

各ビューは、

プロパティを介してサブビューにリンクされており、サブビューでアクションを実行できます。

nodes

view status（viewstate）

ビューには状態があり、ビューとそのすべてのサブビューの変更検出を実行するかどうかを決定する上で重要な役割を果たします。重要な状態には次のものがあります

：ビューが最初のチェックであるかどうかを示します。

1. FirstCheck：ビューの変更検出を有効にするかどうかを示します。
2. ChecksEnabled：ビューでエラーが発生したかどうかを示します。
3. Errored：ビューが破壊されたかどうかを示します。
4. Destroyed
is

またはビューが

またはChecksEnabled状態にある場合、ビューとそのサブビューの変更検出がスキップされます。デフォルトでは、すべてのビューは、falseが使用されない限りErroredで初期化されます。 Destroyed Angularは、基礎となるコンポーネントビューをカプセル化し、ChangeDetectionStrategy.OnPushメソッドなどのビューを操作するための高度な概念を提供します。非同期イベントが発生すると、Angularはそのトップレベルのの変化検出をトリガーします。これは、独自の変更検出後にサブビューを再帰的に検出します。 ChecksEnabled

トークンを介してコンポーネントコンストラクターに注入できます。 ViewRef detectChangesViewRef検出操作の変更ViewRef

checkAndUpdateView関数は、ビューの変更検出を実行する主なロジックです。この関数は、ホストコンポーネントから開始して、各コンポーネントとそのサブコンポーネントを順番にチェックして、再帰的に呼び出します。

関数が起動されると、次の順序で操作を実行します。

set
1. 。 ViewState.firstCheck
サブコンポーネント/命令インスタンスの入力プロパティを確認して更新します。
サブビューの変更検出ステータスを更新します（変更検出戦略の実装の一部）。
埋め込みビューの変更検出を実行します（上記の手順を繰り返します）。
バインディングが変化した場合、子コンポーネントの
5. ライフサイクルフックが呼び出されます。 OnChanges
サブコンポーネントのライフサイクルフックを
6. およびOnInitライフサイクルフック（ngDoCheckは最初のチェックでのみ呼び出されます）を呼び出します。 OnInit
サブビューコンポーネントインスタンスの
7. クエリリストを更新します。 ContentChildren
サブコンポーネントインスタンスの
8. およびAfterContentInitライフサイクルフックを呼び出します（AfterContentCheckedは最初のチェックでのみ呼び出されます）。 AfterContentInit
現在のビューコンポーネントインスタンスのプロパティが変更された場合、現在のビューのDOM補間を更新します。
サブビューの変更検出を実行します（上記の手順を繰り返します）。
現在のビューコンポーネントインスタンスの
11. クエリリストを更新します。 ViewChildren
サブコンポーネントインスタンスの
12. およびAfterViewInitライフサイクルフックを呼び出します（AfterViewCheckedは最初のチェックでのみ呼び出されます）。 AfterViewInit
現在のビューのチェックを無効にします（変更検出ポリシーの実装の一部）。

検出戦略とマニュアルトリガーを変更

入力属性の変更や明示的なイベントの起動など、実際のデータが変更された場合にのみ変更検出を実行するため、ポリシーはパフォーマンスオーバーヘッドを大幅に削減できます。 ChangeDetectionStrategy.OnPush

特に大規模で複雑なアプリケーションで、変化検出のより細かい制御を可能にするために、ChangeDetectorRef、detectChanges()、markForCheck()などのメソッドを提供します。 detach()

（以下では、の使用方法と、特定のアプリケーションシナリオとChangeDetectorRef、detach()、reattach()、およびmarkForCheck()、およびサンプルコードを含む、変化検出の最適化戦略を詳細に紹介します。 detectChanges()メソッド）

（記事の残りの部分では、これらの方法を使用してパフォーマンスを最適化し、実用的なアプリケーションのシナリオとコードの例を提供する方法を引き続き検討します。）

（最後に、この記事では、角度変化の検出、オンプッシュ戦略、変化検出最適化手法、ゾーンの役割、および変化検出のデバッグ方法に関するよくある質問をまとめます。）

以上がAngularの検出を変更：知る必要があるすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。