Wie kann die Leistung von Angular-Anwendungen mithilfe von Pipes verbessert werden?

Wie können Sie die Leistung Ihrer Angular-Anwendung mithilfe von Pipes verbessern? In diesem Artikel erhalten Sie anhand von Codebeispielen eine detaillierte Einführung in die Verwendung von Pipelines zur Verbesserung der Leistung von Angular-Anwendungen.

Lassen Sie es uns anhand eines Beispiels demonstrieren:

Beispiel

@Component({
  selector: 'my-app',
  template: `
    <p *ngFor="let user of users">
      {{ user.name }}有一只猫 {{ getCat(user.id).name }}
    </p>
  `,
  styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent {
  users = [{ id: 1, name: &#39;wang&#39; }, { id: 2, name: &#39;li&#39; }];
  cats = [{ name: &#39;Tom&#39;, userId: 1 }, { name: &#39;Jerry&#39;, userId: 2 }];

  getCat(userId: number) {
    console.log(&#39;User&#39;, userId);
    return this.cats.find(c => c.userId === userId);
  }
}

Es gibt zwei Datensätze, nämlich users und cats. Sie können < Unter code>Benutzer versteht man eingehende Daten oder andere Datenquellen. Erhalten Sie die entsprechende Katze über die Methode getCat(). Dieses Szenario ist in der Geschäftsentwicklung sehr bekannt. Fügen Sie abschließend eine globale Vorlage hinzu, um direkt eine Schleifenausgabe durchzuführen. [Verwandte Tutorial-Empfehlung: „users 与 cats，可以把 users 理解为传入数据，或者是其他数据源。通过 getCat() 方法获取对应的 猫咪，这种场景再业务开发中再熟悉不过。 最后添加全局模板直接进行一个循环输出。【相关教程推荐：《angular教程》】

接下来看下输出

User 1
User 2
User 1
User 2
User 1
User 2
User 1
User 2

可以 getCat() 方法调用了 8 次，有 6 次无用调用。这是因为当在模板内使用方法时，angular 每次变更检测都会调用其方法。

我们可以添加一个监听事件

@HostListener('click')
clicked() { }

每当点击事件触发，就会调用 4 次

User 1
User 2
User 1
User 2

这不是我想要，我只想让它调用两次啊！！！数据量大了这么玩顶不住。

---

Pure Pipe

接下来就是主角登场了。我们先创建一个 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 的实现与之前调用的方法基本是一样的，在模板中添加引用之后，却发现结果符合之前的预期了，只调用了两次。

这是因为 pipe 默认是 pure pipe，且 Pipe 装饰器有 pure 可用来设置管道模式。

@Pipe({
  name: 'cat',
  pure: true
})

而 pure 表示的是: transform 的值(入参value)发生变化时是否 不跟随变更检测调用。

官方解释：如果该管道具有内部状态（也就是说，其结果会依赖内部状态，而不仅仅依赖参数），就要把 pure 设置为 false。 这种情况下，该管道会在每个变更检测周期中都被调用一次 —— 即使其参数没有发生任何变化。 When true, the pipe is pure, meaning that the transform() method is invoked only when its input arguments change. Pipes are pure by default.

当把 pure 改成 false，会随变更检测调用多次，不管值发生变化没。

了解变更检测机制：

  [译]深入理解Angular onPush变更检测策略

https://zhuanlan.zhihu.com/p/96486260

这样我们通过 pipe 代替模板中的方法，就减少了 angularAngular Tutorial

“]

Schauen Sie sich als Nächstes die Ausgabe an rrreee

Sie können sehen, dass die Methode getCat()

8

Mal aufgerufen wurde, und Es gibt

6 nutzlose Anrufe. Dies liegt daran, dass angular bei Verwendung einer Methode innerhalb einer Vorlage ihre Methode jedes Mal aufruft, wenn eine Änderungserkennung auftritt.

Wir können ein Hörereignis hinzufügen🎜rrreee🎜Immer wenn das Klickereignis ausgelöst wird, wird es 🎜4🎜 Mal aufgerufen🎜rrreee🎜Das ist nicht das, was ich möchte, ich möchte nur, dass es zweimal aufgerufen wird! ! ! Die Datenmenge ist so groß, dass es unerträglich ist, so zu spielen. 🎜

---

🎜Pure Pipe🎜🎜🎜Als nächstes erscheint der Protagonist. Wir erstellen zuerst eine pipe🎜rrreee🎜Sie können sehen, dass die Implementierung von pipe im Grunde dieselbe ist wie die zuvor aufgerufene Methode. Nachdem wir einen Verweis auf die Vorlage hinzugefügt haben, haben wir festgestellt dass das Ergebnis mit dem vorherigen übereinstimmt. Wie erwartet wurde es nur zweimal aufgerufen. 🎜🎜Das liegt daran, dass pipe standardmäßig auf pure pipe eingestellt ist und der Pipe-Decorator über pure verfügt, was dazu verwendet werden kann Stellen Sie den Pipe-Modus ein. 🎜rrreee🎜🎜 Und pure stellt dar: ob der Wert von transform (Eingabeparameterwert) dem Änderungserkennungsaufruf nicht folgt🎜, wenn er sich ändert. 🎜

🎜Offizielle Erklärung: Wenn die Pipeline einen internen Status hat (d. h. ihr Ergebnis hängt vom internen Status ab, nicht nur von den Parametern), setzen Sie pure auf „false“. In diesem Fall wird die Pipeline einmal in jedem Änderungserkennungszyklus aufgerufen – auch wenn sich ihre Parameter nicht geändert haben. Wenn true, ist die Pipe rein, was bedeutet, dass die transform()-Methode nur aufgerufen wird, wenn sich ihre Eingabeargumente ändern. Pipes sind standardmäßig rein.🎜

🎜Beim Ändern von pure in false, wird bei Änderungserkennung mehrmals aufgerufen, unabhängig davon, ob sich der Wert ändert. 🎜

🎜Verstehen Sie den Änderungserkennungsmechanismus: 🎜🎜 [Übersetzung] Vertiefendes Verständnis der Angular onPush-Änderungserkennungsstrategie🎜🎜https://zhuanlan.zhihu.com/p/96486260🎜

🎜Auf diese Weise , übergeben wir die pipe . Durch das Ersetzen von Methoden in Vorlagen werden unnötige Aufrufe in angular-Vorlagen reduziert. 🎜🎜🎜Zusammenfassung🎜🎜🎜Wenn es sich bei den Daten in der Vorlage um statische Daten handelt, die konvertiert oder verarbeitet werden müssen, ist es besser, die Pipe als die Call-Methode aufzurufen. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie kann die Leistung von Angular-Anwendungen mithilfe von Pipes verbessert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!