Angular の変更検出メカニズムとパフォーマンスを最適化する方法の簡単な分析?

変化検出とは何ですか?次の記事では、Angular の変更検出メカニズムを理解し、変更検出がどのように機能するかについて説明し、Angular 変更検出のパフォーマンス最適化方法を紹介します。

#変更検出 (Change Detection) とは何ですか?

#変更検出の概念

angular チュートリアル"]

変更検出のトリガー タイミング

イベント::
• クリック、マウスオーバー、マウスアウト、キーアップ、キーダウン、およびその他のブラウザ イベント;
タイマー:
• setTimeout/setInterval;
XHR:
• 各種ご要望等

NgZone とそのフォーク オブジェクト Zone.js について説明します。

Zone.js は、ブラウザーでの非同期アクティビティをカプセル化してインターセプトするために使用され、非同期ライフサイクル フック と 統合された非同期エラー処理メカニズムも提供します。

Zone.js は、Monkey Patching を使用して、ブラウザ内の一般的なメソッドと要素 (setTimeout や など) をインターセプトします。 HTMLElement.prototype.onclick。 Angular は、起動時に Zone.js を利用して、いくつかの低レベルのブラウザ API にパッチを適用して、非同期イベントをキャプチャし、キャプチャ時間後に変更検出を呼び出します。

Zone.js をフォークし、独自のゾーン NgZone を展開して、アプリケーション内のすべての非同期操作がこのゾーンで実行されるようにします。

Angular の変更検出はどのように機能しますか?

changeDetector を生成し、コンポーネントの変更ステータスを記録します。

ApplicationRef のインスタンスも作成します。このインスタンスは、現在作成中の Angular アプリケーションのインスタンスを表します。 ApplicationRef 作成されると、ngZone の onMicrotaskEmpty イベントにサブスクライブされ、すべてのマイクロタスクが完了した後、すべてのビューの detectChanges() が呼び出されて実行されます。変化検出です。

変更検出の実行順序

• すべてのサブサブコンポーネントにバインドされているプロパティを更新します

• すべてのサブコンポーネントのライフサイクル フック OnChanges、OnInit、DoCheck、AfterContentInit を呼び出します。

• 現在のコンポーネントの DOM を更新します。

• 変更検出を呼び出します。サブコンポーネントの

• すべてのサブコンポーネントのライフ サイクル フック ngAfterViewInit を呼び出す

ケース 1 開発モードでは、Angular は 二次検出を実行します (本番環境で enableProdMode()## を呼び出します #、検出数は 1 に減ります)。 ステップ 4 が完了した後、子孫コンポーネントで親コンポーネントのプロパティを変更すると、Angular が 2 回目の検出を実行して 2 つの値が矛盾していることが判明すると、上記のエラーが発生します。

ケース 2 親コンポーネントがプロパティを子コンポーネントにバインドしている限り、OnChanges、OnInit、DoCheck、AfterContentInit、AfterViewInit の実行に関係なく、サイクルフック内の次のコードもエラーを報告します。

// #parent
{{data}}
<child [data]="data"></child>

// in child component ts, execute:
this.parent.data = &#39;new Value&#39;;

• ##デフォルト戦略#

  このデフォルトの戦略は、イベント (ユーザー イベント、タイマー、XHR、Promise など) が変更検出をトリガーするたびに、コンポーネント ツリー内のすべてのコンポーネントを上から下までチェックします。コンポーネントの依存関係について何の仮定も行わないこの保守的なチェック方法は、Dirty Check と呼ばれます。この戦略は、適用するコンポーネントが多すぎると、アプリケーションのパフォーマンスに影響を与えます。

• #OnPush 戦略

  コンポーネント デコレータを変更する

  changeDetection、OnPush 戦略に設定した後、Angular は変更検出をトリガーするたびに、このコンポーネントとこのコンポーネントのすべてのサブコンポーネントの変更検出をスキップします。

  OnPush 戦略では、次の状況のみがコンポーネント変更検出をトリガーします:

  • 入力値 (@Input) の変更 (入力に入力された値は新しい参照である必要があります)
  • 現在のコンポーネントまたはサブコンポーネントの 1 つがイベント をトリガーしました (ただし、onPush 戦略では、次の操作は変更検出をトリガーしません)
    • setTimeout()
    • setInterval()
    • Promise.resolve().then()
    • this.http.get('...').subscribe()
  • 変更検出を手動でトリガーする (各コンポーネントはコンポーネント ビュー ChangeDetectorRef に関連付けられます)
    • detectChanges(): 現在のコンポーネントとサブコンポーネントの変更検出をトリガーします
    • ##markForCheck(): 変更検出はトリガーされませんが、現在の OnPush コンポーネントと、親コンポーネントが OnPush であるすべてのコンポーネントが検出ステータスを必要としてマークされます #、現在または次の変更検出サイクルで検出します
    ApplicationRef.tick()
    • : コンポーネントの変更検出に従ってアプリケーション全体の変更検出をトリガーします戦略
    非同期パイプ
での変更検出についてはどうですか角度の最適化?

コンポーネントはデフォルトで Default Strategy