ホームページ > 記事 > ウェブフロントエンド > パイプを使用して Angular アプリケーションのパフォーマンスを向上させるにはどうすればよいですか?
パイプラインを使用して Angular アプリケーションのパフォーマンスを向上させるにはどうすればよいですか?この記事では、コード例を使用して、パイプラインを使用して Angular アプリケーションのパフォーマンスを向上させる方法を詳しく紹介します。
例を通してそれを示してみましょう:
@Component({ selector: 'my-app', template: ` <p *ngFor="let user of users"> {{ user.name }}有一只猫 {{ getCat(user.id).name }} </p> `, styleUrls: ['./app.component.css'] }) export class AppComponent { users = [{ id: 1, name: 'wang' }, { id: 2, name: 'li' }]; cats = [{ name: 'Tom', userId: 1 }, { name: 'Jerry', userId: 2 }]; getCat(userId: number) { console.log('User', userId); return this.cats.find(c => c.userId === userId); } }
それぞれ 2 つのデータ セットがあります。 users
および cats
、users
は、受信データまたは他のデータ ソースとして理解できます。 getCat()
メソッドを通じて対応する猫を取得するこのシナリオは、ビジネス開発ではよく知られています。
最後に、ループ出力を直接実行するためのグローバル テンプレートを追加します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
次に出力を確認します
User 1 User 2 User 1 User 2 User 1 User 2 User 1 User 2
次のことができますgetCat()
メソッドが呼び出されます 8 回、#6 無駄な呼び出しがあります。これは、テンプレート内でメソッドが使用される場合、変更検出が発生するたびにそのメソッドが呼び出されるからです。 リッスン イベントを追加できます
@HostListener('click') clicked() { }クリック イベントがトリガーされるたびに、
4
回User 1 User 2 User 1 User 2が呼び出されます。これは私が行うものではありません。欲しい、私はそれを2回呼びたいだけなのです! ! !データ量が多すぎて、このままプレイするのは耐えられません。 ピュアパイプ
@Pipe({ name: 'cat', }) export class CatPipe implements PipeTransform { constructor(private appComponent: AppComponent) {} transform(value, property: 'name' | 'userId'): unknown { console.log('User', value); const cat = this.appComponent.cats.find(c => c.userId === value); if (cat) { return cat[property]; } } }
を作成します。
pipe の実装は、前に呼び出したメソッドと基本的に同じであることがわかります。テンプレートに参照を追加した後、 、結果がわかりました。事前の予想どおり、呼び出されたのは 2 回だけでした。 これは、
pipe
pure Pipe であり、
Pipe デコレーターには次の目的で使用できる
pure があるためです。パイプモードを設定します。
@Pipe({ name: 'cat', pure: true })
そして pure は、transform (入力パラメータ値) の値が変化したときに、変更検出呼び出し
に従わないかどうかを表します。 正式な説明: パイプラインに内部状態がある (つまり、結果がパラメーターだけでなく内部状態に依存する) 場合は、pure を false に設定します。この場合、パイプラインは、パラメーターが変更されていない場合でも、変更検出サイクルごとに 1 回呼び出されます。
true の場合、パイプは純粋です。つまり、入力引数が変更された場合にのみ、transform() メソッドが呼び出されます。パイプはデフォルトで純粋です。
が次のように変更されます。When
pure
false は、値が変化するかどうかに関係なく、変化検出で複数回呼び出されます。
変更検出メカニズムを理解する:
[翻訳] Angular onPush 変更検出戦略についての深い理解 https://zhuanlan.zhihu.com/ p/96486260に置き換えます。これにより、このようにして、テンプレート内のメソッドを
pipe
angular テンプレート内の不要な呼び出しが削減されます。
概要
プログラミング教育
をご覧ください。 !以上がパイプを使用して Angular アプリケーションのパフォーマンスを向上させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。