Angularの一方向データフローの使用方法の詳細な説明-jsチュートリアル-php.cn

Angularの一方向データフローの使用方法の詳細な説明

php中世界最好的语言

リリース： 2018-04-08 16:03:09

オリジナル

1739 人が閲覧しました

今回は、Angular の一方向データフローの使用方法について詳しく説明します。Angular の一方向データフローを使用する際の注意事項は何ですか?実際のケースを見てみましょう。

変更検出

Angular では、データは最上位のルートノードから最後のリーフノードまで一方向に流れ、一方向ツリーを形成します。

Angular は、すべての非同期操作がモデルの変更を引き起こす可能性があると考えています。データモデルの変更を引き起こすイベントソースは次のとおりです:

イベント: click、mouseover、keyup...
Timers: setInterval、setTimeout
XHRs: Ajax (GET, POST...)

Angular は、非同期動作が検出されると、ゾーンをカプセル化し、非同期動作が検出されると、変更検出を実行します。

データフローは一方向であるため、コンポーネントのデータソースは親コンポーネントからのみ渡すことができるため、Angular は検出コンポーネントを上から下に走査し、次の限り子コンポーネントを検出し続けることができます。親コンポーネントが検出されます。

angularjsと比較すると、双方向かつ無秩序なデータフローの方向により、データが安定するまで何度も変更検出が繰り返されるため、パフォーマンス上の問題が発生したり、データとviewが不整合な状態になる可能性がありますつまり、レンダリングプロセスが完了します。結果のビューは、データの実際の状態を反映していません。

出力のレンダリング

データモデルの変更が検出され、コンポーネントを再レンダリングする必要がある場合、Angular はコンポーネントの新しいバージョンに対応する新しい DOM データ構造を生成する DOM 生成

関数を実行します。ビューの。

Angular レンダリングプロセス中に、テンプレート

expressions が評価され、コンポーネントツリー全体で lifecycle フックが呼び出されます。

注: 緑色のサインは複数回呼び出されます

ライフコールサイクル(緑色の有向線)から、ngAfterViewCheckedは、コンポーネントおよびサブコンポーネントビューの出力が完了したことを示します。次の例を見てください:

import {Component, AfterViewChecked} from '@angular/core';
import {Course} from "./course";
@Component({
 selector: 'app-root',
 template: `
 <p class="course">
  <span class="description">{{course.description}}</span>
 </p>
`})
export class AppComponent implements AfterViewChecked {
 course: Course = {
  id: 1,
  description: "Angular For Beginners"
 };
 ngAfterViewChecked() {
  this.course.description += Math.random();
 }
}

ログイン後にコピー

上記のコードは、角度変化検出サイクル中にエラーを引き起こします。コンポーネントは DOM データ構造の出力を完了し、コンポーネントの ngAfterViewChecked() メソッドのデータ状態も変更しました。これにより、ビューのレンダリング後にデータとビューの状態が一致しなくなります。

データはコンポーネントクラスからそれらを表す DOM データ構造に流れます。これらの DOM データ構造を生成する行為自体は、データのさらなる変更にはつながりません。ただし、ngAfterView ライフサイクル中にデータを変更するのは、Angular の「一方向データフロー」ルールにより、ビューの作成後に更新することは禁止されています。

これは、データモデルからビューまでのプロセスが一方向であり、ビューの後にデータフローを変更できないことを意味します。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue はどのように CDN を使用して最初の画面の読み込み速度を最適化しますか?

以上がAngularの一方向データフローの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。