9.3.2021
Angular - Funktionsaufrufe in Templates vermeiden
- Standardmäßig führt Angular jedes Mal, wenn sich etwas in der Anwendung ändert, eine ChangeDetection für alle Komponenten durch, d.h. es wird geprüft, ob sich der Wert von Template-Ausdrücken geändert hat.
- Wenn die Komplexität der Komponente wächst, dauert die Prüfung länger, aber durch ChangeDetectionStrategy.OnPush sagen wir Angular, dass es nur prüfen soll, ob sich die Referenzen geändert haben, anstatt nach den Werten jeder Eigenschaft zu suchen.
- OnPush-ChangeDetectionStrategy hilft, die Anzahl der Änderungszyklen zu reduzieren.
Beispiel: https://gist.github.com/RahmiTufanoglu/917a1f1c015e2602ecda028ae723d0a4
- Um festzustellen, ob formatName() neu gerendert werden muss, muss Angular die formatName()-Funktion ausgeführt haben, um zu prüfen, ob sich der Rückgabewert geändert hat.
- Da Angular nicht vorhersagen kann, ob sich der Rückgabewert von formatName() geändert hat, muss es die Funktion bei jeder Änderungserkennung ausführen.
- Wenn also die Änderungserkennung 100 Mal läuft, wird die Funktion auch 100 Mal aufgerufen, auch wenn sich ihr Rückgabewert nie ändert.
- Problematisch wird es bei großen Komponenten. Template-Rendering nimmt Zeit in Anspruch und die Leistung wird beeinträchtigt.
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund