Die Entwicklung der Änderungserkennung von Angular (zone.js) zu Angular (provideExperimentalZonelessChangeDetection)

Änderungserkennung ist ein grundlegender Aspekt von Angular, der für die Identifizierung und Aktualisierung von Teilen des DOM verantwortlich ist, die sich als Reaktion auf Datenänderungen oder Benutzerinteraktionen geändert haben. Dieser Prozess stellt sicher, dass die Benutzeroberfläche mit den zugrunde liegenden Daten konsistent bleibt, wodurch das Benutzererlebnis und die Anwendungsleistung verbessert werden.

Die Rolle von Zone.js

In der Vergangenheit hat sich Angular für seinen Änderungserkennungsmechanismus auf Zone.js verlassen. Zone.js ist eine JavaScript-Bibliothek, die asynchrone Vorgänge abfängt und es Angular ermöglicht, Änderungen zu überwachen und entsprechende Aktualisierungen auszulösen. Allerdings kann die Einbeziehung von Zone.js den Overhead der Anwendung erhöhen, insbesondere in Szenarien mit häufigen asynchronen Aktivitäten.

Strategien zur Änderungserkennung

Angular bietet zwei primäre Strategien zur Änderungserkennung:

• Standard: Die Änderungserkennung wird nach jedem Lebenszyklus-Hook ausgelöst, z. B. ngOnInit oder ngAfterViewInit. Diese Strategie ist unkompliziert, kann jedoch insbesondere bei großen Anwendungen zu unnötigen DOM-Updates führen.

@Component({
  selector: 'app-my-component',
  template: `
    <p>{{ message }}</p>
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

Diese Strategie ist einfacher zu implementieren, da Angular den Großteil der Änderungserkennungslogik automatisch verarbeitet.
Die größte Herausforderung bei dieser Änderungserkennungsstrategie bestand darin, dass sie zu unnötigen DOM-Updates führte, was für große Anwendungen von entscheidender Bedeutung ist.

• OnPush: Die Änderungserkennung wird nur ausgelöst, wenn sich Eingabeeigenschaften oder asynchrone Observablen ändern. Diese Strategie ist bei komplexen Komponenten mit häufigen Datenaktualisierungen leistungsfähiger, erfordert jedoch mehr manuelle Verwaltung.

@Component({
  selector: 'app-my-component',
  template: `
    <p>{{ message }}</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

Während die onPush-Änderungserkennungsstrategie unnötige DOM-Manipulationen minimierte, bestand die größte Herausforderung bei der onPush-Änderungsstrategie darin, dass die Entwickler mehr manuelle Verwaltung durchführen und Änderungen manuell auslösen mussten. In bestimmten Szenarien mussten sie die Änderungserkennung explizit mit changeDetectorRef.detectChanges() handhaben, beispielsweise wenn sich Daten indirekt ändern oder wenn veränderliche Objekte verwendet werden.

Winkel-18- und Hybrid-Änderungserkennung: Ein zonenloser Ansatz

Um die mit Zone.js verbundenen Herausforderungen zu bewältigen, hat Angular 18 eine experimentelle Funktion namens Hybrid Change Detection eingeführt. Dieser Ansatz zielt darauf ab, Zone.js vollständig zu eliminieren und einen neuen Änderungserkennungsmechanismus zu verwenden, um Änderungen zu erkennen und das DOM zu manipulieren.

Aktivieren der hybriden Änderungserkennung:

Um die Hybrid-Änderungserkennung zu aktivieren, können Sie den folgenden Code verwenden:

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

Dies löst in den folgenden Szenarien eine Änderungserkennung aus:

• Ein Signal wird aktualisiert.
• changeDetectorRef.markForCheck() wird aufgerufen.
• Ein mit der AsyncPipe abonniertes Observable erhält einen neuen Wert.
• Eine Komponente wird angehängt oder gelöst.
• Ein Eingang ist gesetzt.

Sobald die Hybrid-Änderungserkennung aktiviert ist, können Sie Zone.js sicher aus den Polyfills Ihrer Anwendung entfernen.

 "polyfills": [
              "zone.js" //remove this line
            ],

Vorteile der hybriden Änderungserkennung

• Verbesserte Leistung: Durch die Eliminierung von Zone.js wird der Overhead reduziert, was zu einer besseren Leistung führt, insbesondere bei Anwendungen mit zahlreichen asynchronen Vorgängen.

• Verbesserte Entwicklererfahrung: Das Entfernen der manuellen Änderungserkennung vereinfacht die Entwicklung und verringert die Fehlerwahrscheinlichkeit.

• Kleinere Anwendungsgröße: Zone.js erhöht die Anwendungsgröße normalerweise um etwa 13 KB. Das Entfernen kann zu einem kleineren Bündel führen.

Das obige ist der detaillierte Inhalt vonDie Entwicklung der Änderungserkennung von Angular (zone.js) zu Angular (provideExperimentalZonelessChangeDetection). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!