パイプを使用して Angular アプリケーションのパフォーマンスを向上させるにはどうすればよいですか?

パイプラインを使用して Angular アプリケーションのパフォーマンスを向上させるにはどうすればよいですか?この記事では、コード例を使用して、パイプラインを使用して Angular アプリケーションのパフォーマンスを向上させる方法を詳しく紹介します。

例を通してそれを示してみましょう:

Example

@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

@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 サイトの他の関連記事を参照してください。