Grundlegendes zum Lebenszyklus von Blazor-Komponenten
- 7 Minuten
Blazor-Komponenten verfügen über einen klar definierten Lebenszyklus, der beim ersten Erstellen der Komponenten beginnt und beim Löschen der Komponenten endet. Eine Reihe von Ereignissen, die als Reaktion auf bestimmte Trigger auftreten, steuert den Komponentenlebenszyklus. Zu diesen Triggern gehören die Komponente, die initialisiert wird, Benutzer*innen, die mit der Komponente interagieren, oder die Seite, auf der sich die Komponente befindet und die geschlossen wird.
In dieser Einheit lernen Sie mehr über die Ereignisse, die während des Lebenszyklus einer Blazor-Komponente auftreten. Sie erfahren, wie Sie diese Ereignisse behandeln, um die erledigte Arbeit zu optimieren und die Reaktionsfähigkeit einer Blazor-Seite zu erhöhen.
Lebenszyklus von Blazor-Komponenten
Blazor-Komponenten stellen die Ansichten in Blazor-Apps dar, die das Layout und die Logik der Benutzeroberfläche definieren. Die Komponenten generieren HTML-Markup, wenn die App ausgeführt wird. Benutzerinteraktionsereignisse können benutzerdefinierten Code auslösen, und Komponenten können aktualisiert werden, um die Anzeige erneut zu rendern. Beim Schließen der Seite entfernt Blazor die Komponente und bereinigt alle Ressourcen. Neue Instanzen werden erstellt, wenn der Benutzer zur Seite zurückkehrt.
Das folgende Diagramm veranschaulicht die Ereignisse, die während der Lebensdauer einer Komponente auftreten, sowie die Methoden, mit denen Sie diese Ereignisse verarbeiten können. Blazor stellt synchrone und asynchrone Versionen jeder Methode zur Verfügung, mit Ausnahme von SetParametersAsync.
Alle Blazor-Komponenten sind von der ComponentBase Klasse oder der IComponent Schnittstelle absteigend, die die angezeigten Methoden definiert und das Standardverhalten bereitstellt. Sie behandeln ein Ereignis, indem Sie die entsprechende Methode außer Kraft setzen.
Auch wenn das Diagramm impliziert, dass es einen Singlethread-Flow zwischen Lebenszyklusmethoden gibt, ermöglichen die asynchronen Versionen dieser Methoden es einer Blazor-App, den Renderingprozess zu beschleunigen. Wenn z. B. await zum ersten Mal in SetParametersAsync auftritt, führt die Blazor-Komponente die Methoden OnInitialized und OnInitializedAsync aus. Wenn die erwartete Anweisung abgeschlossen ist, wird der Ausführungsthread in SetParametersAsync fortgesetzt.
Die gleiche Logik gilt für die gesamte Reihe der Lebenszyklusmethoden. Jede await-Operation, die bei OnInitializedAsync und OnParametersSetAsync auftritt, zeigt zudem an, dass sich der Zustand der Komponente geändert hat und kann ein sofortiges Rendern der Seite auslösen. Die Seite wird möglicherweise mehrmals gerendert, bevor die Initialisierung vollständig abgeschlossen ist.
Grundlegendes zu Lebenszyklusmethoden
Jede Lebenszyklusmethode der Komponente erfüllt einen bestimmten Zweck, und Sie können die Methoden überschreiben, um Ihrer Komponente benutzerdefinierte Logik hinzuzufügen. In der folgenden Tabelle sind die Lebenszyklusmethoden zusammen mit einer Beschreibung ihres Zwecks in der Reihenfolge aufgeführt, in der sie auftreten.
| Order | Lebenszyklusmethode | Description |
|---|---|---|
| 1 | Erstellte Komponente | Die Komponente wird instanziiert. |
| 2 | SetParametersAsync | Legt Parameter aus dem übergeordneten Element der Komponente in der Renderstruktur fest |
| 3 | OnInitialized / OnInitializedAsync | Tritt auf, wenn die Komponente startbereit ist |
| 4 | OnParametersSet / OnParametersSetAsync | Tritt auf, wenn die Komponente Parameter und Eigenschaften empfängt. |
| 5 | OnAfterRender / OnAfterRenderAsync | Tritt auf, nachdem die Komponente gerendert wurde. |
| 6 | Dispose / DisposeAsync |
Wenn die Komponente entweder IDisposable oder IAsyncDisposable implementiert, wird im Rahmen des Löschens der Komponente das geeignete verwerfbare Objekt erstellt. |
SetParametersAsync-Methode
Wenn ein Benutzer eine Seite mit einer Blazor-Komponente besucht, erstellt die Blazor-Laufzeit eine neue Instanz der Komponente und führt den Standardkonstruktor aus. Sobald die Komponente erstellt wurde, ruft die Blazor-Runtime die SetParametersAsync-Methode auf.
Wenn die Komponente Parameter definiert, fügt die Blazor-Runtime die Werte für diese Parameter aus der aufrufenden Umgebung in die Komponente ein. Diese Parameter sind in einem ParameterView-Objekt enthalten und werden für die SetParametersAsync-Methode zugänglich gemacht. Sie rufen die base.SetParametersAsync-Methode auf, um die Parameter-Eigenschaften Ihrer Komponente mit diesen Werten zu füllen.
Wenn Sie alternativ die Parameter auf eine andere Art und Weise verarbeiten möchten, ist dies die richtige Methode dafür. So müssen Sie beispielsweise alle an die Komponente übergebenen Parameter überprüfen, bevor Sie sie verwenden.
Note
Die SetParametersAsync-Methode wird immer ausgeführt, wenn eine Komponente erstellt wird, auch wenn die Komponente über keine Parameter verfügt.
„OnInitialized“- und „OnInitializedAsync“-Methoden
Sie können die Methoden OnInitialized und OnInitializedAsync überschreiben, um benutzerdefinierte Funktionen einzuschließen. Diese Methoden werden ausgeführt, nachdem die SetParametersAsync-Methode die parameterbasierten Eigenschaften der Komponente aufgefüllt hat, die entweder mit ParameterAttribute oder CascadingParameterAttribute zugeordnet werden. Sie führen in diesen Methoden Initialisierungslogik aus.
Wenn die Eigenschaft render-mode der Anwendung auf Server festgelegt ist, werden die Methoden OnInitialized und OnInitializedAsync für eine Komponenteninstanz nur einmal ausgeführt. Wenn ein übergeordnetes Element der Komponente die Komponentenparameter ändert, wird die Methode SetParametersAsync erneut ausgeführt, diese Methoden jedoch nicht. Sollten Sie eine Komponente neu initialisieren müssen, wenn sich die Parameter ändern, verwenden Sie die SetParametersAsync-Methode. Wenn Sie die Initialisierung einmal durchführen möchten, verwenden Sie diese Methoden.
Wenn die Eigenschaft render-mode auf ServerPrerendered festgelegt ist, werden die Methoden OnInitialized und OnInitializedAsync zweimal ausgeführt: einmal während der Prerenderingphase, in der die Ausgabe der statischen Seite generiert wird, und ein zweites Mal, wenn der Server eine SignalR-Verbindung mit dem Browser hergestellt hat. Sie können mit diesen Methoden möglicherweise aufwendige Initialisierungsaufgaben erledigen, z. B. das Abrufen von Daten aus einem Webdienst, den Sie zum Festlegen des Blazor-Komponentenstatus verwenden. Speichern Sie in diesem Fall die Statusinformationen während der ersten Ausführung zwischen, und verwenden Sie den gespeicherten Zustand während der zweiten Ausführung erneut.
Alle Abhängigkeiten, die die Blazor-Komponente verwendet, werden eingefügt, nachdem die Instanz erstellt wurde, aber bevor die Methoden OnInitialized oder OnInitializedAsync ausgeführt werden. Sie können die durch diese Abhängigkeiten eingeschleusten Objekte in den Methoden OnInitialized oder OnInitializedAsync verwenden, aber nicht vorher.
Important
Blazor-Komponenten unterstützen keine Abhängigkeitseinschleusung für Konstruktoren. Verwenden Sie stattdessen entweder die Anweisung @inject im Komponentenmarkup oder InjectAttribute für die Eigenschaftendeklaration.
Während der Prerenderphase kann der Code in einer Blazor Server-Komponente keine Aktionen ausführen, die eine Verbindung zum Browser erfordern, z. B. das Aufrufen von JavaScript-Code. Sie sollten Logik, die von einer Verbindung mit dem Browser abhängt, in den Methoden OnAfterRender oder OnAfterRenderAsync einfügen.
„OnParametersSet“- und „OnParametersSetAsync“-Methoden
Die Methoden OnParametersSet und OnParametersSetAsync werden nach den Methoden OnInitialized oder OnInitializedAsync ausgeführt, wenn die Komponente zum ersten Mal gerendert wird, oder nach der Methode SetParametersAsync im nachfolgenden Rendering. Wie SetParametersAsync werden diese Methoden immer aufgerufen, auch wenn die Komponente keine Parameter aufweist.
Verwenden Sie eine der Methoden, um Initialisierungsaufgaben zu erledigen, die von den Komponentenparameterwerten abhängen, z. B. die Berechnung von Werten für berechnete Eigenschaften. Führen Sie zeitintensive Vorgänge wie diese nicht in einem Konstruktor aus. Konstruktoren sind synchron, und das Warten auf den Abschluss zeitintensiver Vorgänge beeinträchtigt die Reaktionsfähigkeit der Seite, die die Komponente enthält.
„OnAfterRender“- und „OnAfterRenderAsync“-Methoden
Die Methoden OnAfterRender und OnAfterRenderAsync werden jedes Mal ausgeführt, wenn die Blazor-Runtime die durch die Komponente dargestellte Ansicht in der Benutzeroberfläche aktualisieren muss. Dieser Zustand tritt in den folgenden Fällen automatisch auf:
- Der Zustand der Komponente ändert sich, z. B. wenn die Methoden
OnInitializedoderOnInitializedAsyncoder die MethodenOnParametersSetundOnParametersSetAsyncausgeführt werden. - Ein Benutzeroberflächenereignis wird ausgelöst.
- Der Anwendungscode ruft die Methode
StateHasChangedder Komponente auf.
Wenn StateHasChanged entweder über ein externes Ereignis oder einen Benutzeroberflächentrigger aufgerufen wird, wird die Komponente bedingt erneut gerendert. Die folgende Liste enthält die Reihenfolge der Methodenaufrufe, einschließlich StateHasChanged und Folgende:
- StateHasChanged: Markiert die Komponente so, dass sie erneut angezeigt werden muss.
- ShouldRender: Gibt ein Flag zurück, das angibt, ob die Komponente gerendert werden soll.
- BuildRenderTree: Rendert die Komponente.
Die StateHasChanged-Methode ruft die ShouldRender-Methode der Komponente auf. Mit dieser Methode soll festgestellt werden, ob die Komponente aufgrund der Zustandsänderung die Ansicht erneut rendern muss. Standardmäßig lösen alle Zustandsänderungen einen Rendervorgang aus, aber Sie können die Methode ShouldRender außer Kraft setzen und Ihre Logik für die Entscheidungsfindung definieren. Die ShouldRender-Methode gibt true zurück, wenn die Ansicht erneut gerendert werden soll, oder andernfalls false.
Wenn die Komponente gerendert werden muss, können Sie mit der BuildRenderTree Methode ein Modell generieren, das die Version des DOM aktualisieren kann, die der Browser zum Anzeigen der Benutzeroberfläche verwendet. Sie können die Standardmethodenimplementierung verwenden, die von der ComponentBase-Klasse bereitgestellt wird, oder Sie können sie mit benutzerdefinierter Logik außer Kraft setzen, wenn Sie spezielle Anforderungen haben.
Als Nächstes wird die Komponentenansicht gerendert und die Benutzeroberfläche aktualisiert. Schließlich führt die Komponente die Methoden OnAfterRender und OnAfterRenderAsync aus. An diesem Punkt ist die Benutzeroberfläche voll funktionsfähig, und Sie können mit JavaScript und allen Elementen im DOM interagieren. Verwenden Sie diese Methoden, um andere Schritte auszuführen, die den Zugriff auf den vollständig gerenderten Inhalt erfordern, z. B. das Aufrufen von JavaScript-Code aus JS-Interop.
Die Methoden OnAfterRender und OnAfterRenderAsync verwenden einen booleschen Parameter namens firstRender. Dieser Parameter ist true bei der ersten Ausführung der Methoden, anschließend ist er false. Sie können diesen Parameter so auswerten, dass einmalige Vorgänge ausgeführt werden, die möglicherweise verschwenderisch und ressourcenintensiv sind, wenn Sie sie jedes Mal wiederholen, wenn die Komponente gerendert wird.
Note
Verwechseln Sie das Prerendering nicht mit dem ersten Rendern für eine Blazor-Komponente. Prerendering tritt auf, bevor eine SignalR-Verbindung mit dem Browser hergestellt, und generiert eine statische Version einer Seite. Das erste Rendern erfolgt, wenn die Verbindung mit dem Browser vollständig aktiv ist und alle Funktionen verfügbar sind.
„Dispose“- und „DisposeAsync“-Methoden
Wie jede .NET-Klasse kann eine Blazor-Komponente verwaltete und nicht verwaltete Ressourcen verwenden. Die Runtime gibt verwaltete Ressourcen automatisch frei. Sie sollten jedoch die Schnittstellen IDisposable oder IAsyncDisposable implementieren und eine Dispose- oder DisposeAsync-Methode bereitstellen, um alle nicht verwalteten Ressourcen freizugeben. Diese Vorgehensweise verringert die Wahrscheinlichkeit von Arbeitsspeicherverlusten auf dem Server.
Behandeln von Ausnahmen in Lebenszyklusmethoden
Wenn bei einer Lebenszyklusmethode für eine Blazor-Komponente ein Fehler auftritt, wird die SignalR-Verbindung zum Browser geschlossen, was dazu führt, dass die Blazor-App nicht mehr funktioniert. Um das zu verhindern, stellen Sie sicher, dass Sie bereit sind, Ausnahmen als Teil der Logik für die Lebenszyklusmethoden zu behandeln. Weitere Informationen finden Sie unter Fehlerbehandlung in ASP.NET Core Blazor-Apps.