Förstå livscykeln för Blazor-komponenten
- 7 minuter
Blazor-komponenter har en väldefinierad livscykel som börjar när de först skapas och slutar när de förstörs. En uppsättning händelser som inträffar som svar på specifika utlösare styr komponentens livscykel. Sådana utlösare inkluderar komponenten som initieras, användare som interagerar med komponenten eller sidan där komponenten är stängd.
I den här lektionen får du lära dig mer om de händelser som inträffar under Blazor-komponentens livscykel. Du ser hur du hanterar dessa händelser för att optimera arbetet och öka svarstiden för en Blazor-sida.
Livscykeln för Blazor-komponenten
Blazor-komponenter representerar vyerna i Blazor-appar, som definierar layout- och användargränssnittslogik. Komponenterna genererar HTML-kod när appen körs. Händelser för användarinteraktion kan utlösa anpassad kod och komponenter kan uppdateras för att återskapa visningen. När sidan stängs tar Blazor bort komponenten och rensar alla resurser. Nya instanser skapas när användaren återgår till sidan.
Följande diagram illustrerar de händelser som inträffar under en komponents livslängd och de metoder som du kan använda för att hantera dessa händelser. Blazor tillhandahåller både synkrona och asynkrona versioner av varje metod förutom SetParametersAsync.
Alla Blazor-komponenter kommer från ComponentBase klassen eller gränssnittet IComponent som definierar de metoder som visas och ger standardbeteende. Du hanterar en händelse genom att åsidosätta motsvarande metod.
Även om diagrammet antyder att det finns ett enkeltrådat flöde mellan livscykelmetoder, gör de asynkrona versionerna av dessa metoder det möjligt för en Blazor-app att påskynda renderingsprocessen. När den första await inträffar i SetParametersAsynckör OnInitialized blazor-komponenten till exempel metoderna och OnInitializedAsync . När den väntade instruktionen är klar återupptas körningstråden i SetParametersAsync .
Samma logik gäller i hela serien med livscykelmetoder.
await Varje åtgärd som inträffar under OnInitializedAsync och OnParametersSetAsync anger att komponentens tillstånd har ändrats och kan utlösa en omedelbar återgivning av sidan. Sidan kan renderas flera gånger innan initieringen är helt klar.
Förstå livscykelmetoder
Varje komponents livscykelmetod har ett specifikt syfte och du kan åsidosätta metoderna för att lägga till anpassad logik i komponenten. I följande tabell visas livscykelmetoderna i den ordning de inträffar och beskriver deras syfte.
| Order | Livscykelmetod | Description |
|---|---|---|
| 1 | Komponent skapad | Komponenten instansieras. |
| 2 | SetParametersAsync | Anger parametrar från komponentens överordnade i återgivningsträdet. |
| 3 | OnInitialized / OnInitializedAsync | Inträffar när komponenten är redo att startas. |
| 4 | OnParametersSet / OnParametersSetAsync | Inträffar när komponenten tar emot parametrar och egenskaper tilldelas. |
| 5 | OnAfterRender / OnAfterRenderAsync | Inträffar efter att komponenten renderas. |
| 6 | Dispose / DisposeAsync |
Om komponenten implementerar antingen IDisposable eller IAsyncDisposable, sker lämplig disponibel som en del av destrukeringen av komponenten. |
Metoden SetParametersAsync
När en användare besöker en sida som innehåller en Blazor-komponent skapar Blazor-körningen en ny instans av komponenten och kör standardkonstruktorn. När komponenten har konstruerats anropar Blazor-körningen SetParametersAsync metoden.
Om komponenten definierar några parametrar matar Blazor-körningen in värdena för dessa parametrar från den anropande miljön till komponenten. Dessa parametrar finns i ett ParameterView objekt och görs tillgängliga för SetParametersAsync metoden. Du anropar base.SetParametersAsync metoden för att fylla i egenskaperna för komponenten Parameter med dessa värden.
Om du behöver hantera parametrarna på ett annat sätt är den här metoden den plats där du kan göra det. Du kan till exempel behöva verifiera alla parametrar som skickas till komponenten innan du använder dem.
Note
Metoden SetParametersAsync körs alltid när en komponent skapas, även om komponenten inte har några parametrar.
Metoderna OnInitialized och OnInitializedAsync
Du kan åsidosätta OnInitialized metoderna och OnInitializedAsync för att inkludera anpassade funktioner. Dessa metoder körs efter att SetParametersAsync metoden fyller komponentens parameterbaserade egenskaper, som tillskrivs antingen ParameterAttribute eller CascadingParameterAttribute. Du kör initieringslogik i dessa metoder.
render-mode Om egenskapen för programmet är inställd på ServerOnInitialized körs metoderna och OnInitializedAsync bara en gång för en komponentinstans. Om en överordnad komponent ändrar komponentparametrarna SetParametersAsync körs metoden igen, men de här metoderna gör det inte. Om du behöver initiera om en komponent när parametrarna ändras använder du SetParametersAsync metoden. Om du vill initiera en gång använder du dessa metoder.
render-mode Om egenskapen är inställd på ServerPrerenderedOnInitialized körs metoderna och OnInitializedAsync två gånger: en gång under den prerenderfas som genererar statiska sidutdata och igen när servern upprättar en SignalR-anslutning till webbläsaren. Du kan utföra dyra initieringsuppgifter i dessa metoder, till exempel att hämta data från en webbtjänst som du använder för att ange Blazor-komponentens tillstånd. I det här fallet cachelagras tillståndsinformationen under den första körningen och återanvänder det sparade tillståndet under den andra körningen.
Eventuella beroenden som Blazor-komponenten använder matas in efter att instansen har skapats men innan OnInitialized metoderna eller OnInitializedAsync körs. Du kan använda de objekt som matas in av dessa beroenden i OnInitialized metoderna eller OnInitializedAsync , men inte tidigare.
Important
Blazor-komponenter stöder inte konstruktorberoendeinmatning. Använd i stället antingen @inject direktivet i komponentpålägget InjectAttribute eller på egenskapsdeklarationen.
Under prerenderfasen kan kod i en Blazor Server-komponent inte utföra åtgärder som kräver en anslutning till webbläsaren, till exempel att anropa JavaScript-kod. Du bör placera logik som är beroende av en anslutning till webbläsaren i OnAfterRender metoderna eller OnAfterRenderAsync .
Metoderna OnParametersSet och OnParametersSetAsync
Metoderna OnParametersSet och OnParametersSetAsync körs efter OnInitialized metoderna eller OnInitializedAsync första gången komponenten återges, eller efter SetParametersAsync metoden i efterföljande återgivning. Precis som SetParametersAsyncanropas dessa metoder alltid, även om komponenten inte har några parametrar.
Använd någon av metoderna för att slutföra initieringsuppgifter som är beroende av komponentparametervärdena, till exempel beräkningsvärden för beräknade egenskaper. Utför inte långvariga åtgärder som dessa i en konstruktor. Konstruktorerna är synkrona och om du väntar på att långvariga åtgärder ska slutföras påverkas svarstiden för sidan som innehåller komponenten.
Metoderna OnAfterRender och OnAfterRenderAsync
Metoderna OnAfterRenderoch OnAfterRenderAsync körs varje gång Blazor-körningen behöver uppdatera vyn som representeras av komponenten i användargränssnittet. Det här tillståndet inträffar automatiskt när:
- Komponentens tillstånd ändras, till exempel när
OnInitializedmetoderna ellerOnInitializedAsyncmetoderna ellerOnParametersSetochOnParametersSetAsynckörs. - En användargränssnittshändelse utlöses.
- Programkoden anropar
StateHasChangedkomponentens metod.
När StateHasChanged anropas, antingen från en extern händelse eller en UI-utlösare, avsändare komponenten villkorligt. Följande lista beskriver ordningen på metodanrop, inklusive och följande StateHasChanged:
- StateHasChanged: Markerar komponenten som behöver återskapas.
- ShouldRender: Returnerar en flagga som anger om komponenten ska återges.
- BuildRenderTree: Renderar komponenten.
Metoden StateHasChanged anropar ShouldRender komponentens metod. Syftet med den här metoden är att avgöra om tillståndsändringen kräver att komponenten uppdaterar vyn. Som standard utlöser alla tillståndsändringar en återgivningsåtgärd, men du kan åsidosätta ShouldRender metoden och definiera din beslutslogik. Metoden ShouldRender returnerar true om vyn ska återges igen eller false på annat sätt.
Om komponenten behöver återges kan du använda BuildRenderTree metoden för att generera en modell som kan uppdatera den version av DOM som webbläsaren använder för att visa användargränssnittet. Du kan använda den standardmetodimplementering som ComponentBase klassen tillhandahåller, eller så kan du åsidosätta den med anpassad logik om du har specifika krav.
Därefter återges komponentvyn och användargränssnittet uppdateras. Slutligen kör komponenten OnAfterRender metoderna och OnAfterRenderAsync . Nu är användargränssnittet fullt fungerande och du kan interagera med JavaScript och alla element i DOM. Använd dessa metoder för att utföra andra steg som kräver åtkomst till det fullständigt renderade innehållet, till exempel att anropa JavaScript-kod från JS-interop.
Metoderna OnAfterRender och OnAfterRenderAsync tar en boolesk parameter med namnet firstRender. Den här parametern är true första gången metoderna körs, men false därefter. Du kan utvärdera den här parametern för att utföra engångsåtgärder som kan vara slösaktiga och resursintensiva om du upprepar dem varje gång komponenten återges.
Note
Blanda inte ihop prerendering med den första återgivningen för en Blazor-komponent. Prerendering sker innan en SignalR-anslutning upprättas med webbläsaren och genererar en statisk version av en sida. Den första återgivningen sker när anslutningen till webbläsaren är helt aktiv och alla funktioner är tillgängliga.
Metoderna Dispose och DisposeAsync
Precis som alla .NET-klasser kan en Blazor-komponent använda hanterade och ohanterade resurser. Körningen återtar automatiskt hanterade resurser. Du bör dock implementera gränssnitten IDisposable eller IAsyncDisposable och ange en Dispose eller DisposeAsync -metod för att frigöra ohanterade resurser. Den här metoden minskar risken för minnesläckor på servern.
Hantera undantag i livscykelmetoder
Om en livscykelmetod för en Blazor-komponent misslyckas stänger den SignalR-anslutningen till webbläsaren, vilket i sin tur gör att Blazor-appen slutar fungera. För att förhindra det här resultatet kontrollerar du att du är beredd att hantera undantag som en del av logiken för livscykelmetoderna. Mer information finns i Hantera fel i ASP.NET Core Blazor-appar.