Omówienie cyklu życia składnika Blazor
Składniki platformy Blazor mają dobrze zdefiniowany cykl życia, który rozpoczyna się po ich pierwszym utworzeniu i kończy się, gdy zostaną zniszczone. Cykl życia składnika podlega zestawowi zdarzeń, które występują w odpowiedzi na określone wyzwalacze. Takie wyzwalacze obejmują inicjowany składnik, interakcję użytkowników ze składnikiem lub stronę, na której znajduje się składnik.
W tej lekcji poznasz zdarzenia występujące podczas cyklu życia składnika Platformy Blazor. Zobaczysz, jak obsługiwać te zdarzenia, aby zoptymalizować wykonaną pracę i zwiększyć czas odpowiedzi strony Platformy Blazor.
Cykl życia składnika Blazor
Składniki platformy Blazor reprezentują widoki w aplikacjach platformy Blazor, które definiują układ i logikę interfejsu użytkownika. Składniki generują znaczniki HTML po uruchomieniu aplikacji. Zdarzenia interakcji użytkownika mogą wyzwalać kod niestandardowy, a składniki można zaktualizować, aby rerender wyświetlacza. Po zamknięciu strony platforma Blazor usuwa składnik i czyści wszystkie zasoby. Nowe wystąpienia są tworzone, gdy użytkownik wróci do strony.
Na poniższym diagramie przedstawiono zdarzenia występujące w okresie istnienia składnika oraz metody, których można użyć do obsługi tych zdarzeń. Platforma Blazor udostępnia zarówno synchroniczne, jak i asynchroniczne wersje każdej metody z wyjątkiem metody SetParametersAsync.
Wszystkie składniki platformy Blazor pochodzą z ComponentBase klasy lub IComponent klasy , która definiuje wyświetlane metody i zapewnia zachowanie domyślne. Zdarzenie jest obsługiwane przez zastąpienie odpowiedniej metody.
Chociaż diagram sugeruje, że istnieje przepływ jednowątkowy między metodami cyklu życia, asynchroniczne wersje tych metod umożliwiają aplikacji Blazor przyspieszenie procesu renderowania. Na przykład gdy pierwszy await wystąpi w SetParametersAsyncelemencie , składnik Blazor uruchamia OnInitialized metody i OnInitializedAsync . Po zakończeniu oczekiwanej instrukcji wątek wykonywania wznawia SetParametersAsync działanie.
Ta sama logika ma zastosowanie w całej serii metod cyklu życia. Ponadto każda await operacja wykonywana podczas OnInitializedAsync i OnParametersSetAsync wskazuje, że stan składnika uległ zmianie i może wyzwolić natychmiastowe renderowanie strony. Strona może być renderowana kilka razy przed ukończeniem inicjowania.
Omówienie metod cyklu życia
Każda metoda cyklu życia składnika ma określony cel i można zastąpić metody dodawania logiki niestandardowej do składnika. W poniższej tabeli wymieniono metody cyklu życia w kolejności ich wystąpienia i opisano ich przeznaczenie.
| Zamówienie | Metoda cyklu życia | opis |
|---|---|---|
| 1 | Utworzony składnik | Składnik jest tworzone wystąpienie. |
| 2 | SetParametersAsync | Ustawia parametry z elementu nadrzędnego składnika w drzewie renderowania. |
| 3 | OnInitialized / OnInitializedAsync | Występuje, gdy składnik jest gotowy do uruchomienia. |
| 4 | OnParametersSet / OnParametersSetAsync | Występuje, gdy składnik otrzymał parametry i właściwości zostały przypisane. |
| 5 | OnAfterRender / OnAfterRenderAsync | Występuje po renderowaniu składnika. |
| 6 | Dispose / DisposeAsync |
Jeśli składnik implementuje element IDisposable lub IAsyncDisposable, odpowiedni jednorazowy występuje w ramach niszczenia składnika. |
Metoda SetParametersAsync
Gdy użytkownik odwiedza stronę zawierającą składnik Blazor, środowisko uruchomieniowe platformy Blazor tworzy nowe wystąpienie składnika i uruchamia konstruktor domyślny. Po utworzeniu składnika środowisko uruchomieniowe Platformy Blazor wywołuje metodę SetParametersAsync .
Jeśli składnik definiuje jakiekolwiek parametry, środowisko uruchomieniowe platformy Blazor wprowadza wartości tych parametrów ze środowiska wywołującego do składnika. Te parametry są zawarte w ParameterView obiekcie i są dostępne dla SetParametersAsync metody . Wywołasz metodę , base.SetParametersAsync aby wypełnić Parameter właściwości składnika tymi wartościami.
Alternatywnie, jeśli musisz obsługiwać parametry inaczej, ta metoda jest miejscem, aby to zrobić. Na przykład może być konieczne zweryfikowanie wszystkich parametrów przekazanych do składnika przed ich użyciem.
Uwaga
Metoda SetParametersAsync zawsze jest uruchamiana po utworzeniu składnika, nawet jeśli składnik nie ma żadnych parametrów.
Metody OnInitialized i OnInitializedAsync
Można zastąpić OnInitialized metody i OnInitializedAsync w celu uwzględnienia funkcji niestandardowych. Te metody są uruchamiane po SetParametersAsync wypełnieniu właściwości opartych na parametrach składnika, które są przypisywane za pomocą metody ParameterAttribute lub CascadingParameterAttribute. Logika inicjowania jest uruchamiana w tych metodach.
render-mode Jeśli właściwość aplikacji jest ustawiona na Server, OnInitialized metody i OnInitializedAsync są uruchamiane tylko raz dla wystąpienia składnika. Jeśli element nadrzędny składnika modyfikuje parametry składnika, metoda jest uruchamiana ponownie, SetParametersAsync ale te metody nie. Jeśli musisz ponownie zainicjować składnik po zmianie parametrów, użyj SetParametersAsync metody . Jeśli chcesz wykonać inicjację raz, użyj tych metod.
render-mode Jeśli właściwość jest ustawiona na ServerPrerendered, OnInitialized metody i OnInitializedAsync są uruchamiane dwa razy: raz w fazie prerender, która generuje statyczne dane wyjściowe strony, a następnie ponownie, gdy serwer ustanawia połączenie usługi SignalR z przeglądarką. W tych metodach można wykonywać kosztowne zadania inicjowania, takie jak pobieranie danych z usługi internetowej używanej do ustawiania stanu składnika Platformy Blazor. W takim przypadku buforuj informacje o stanie podczas pierwszego wykonywania i ponownie użyj zapisanego stanu podczas drugiego wykonania.
Wszystkie zależności używane przez składnik Blazor są wstrzykiwane, gdy wystąpienie zostało utworzone, ale przed uruchomieniem OnInitialized metod lub OnInitializedAsync . Można użyć obiektów wstrzykiwanych przez te zależności w OnInitialized metodach lub OnInitializedAsync , ale nie wcześniej.
Ważne
Składniki platformy Blazor nie obsługują wstrzykiwania zależności konstruktora. Zamiast tego należy użyć @inject dyrektywy w znaczniku składnika lub InjectAttribute w deklaracji właściwości.
W fazie prerender kod w składniku serwera Blazor nie może wykonywać akcji wymagających połączenia z przeglądarką, takich jak wywoływanie kodu JavaScript. Należy umieścić logikę, która zależy od połączenia z przeglądarką w metodach OnAfterRender lub OnAfterRenderAsync .
Metody OnParametersSet i OnParametersSetAsync
Metody OnParametersSet i OnParametersSetAsync są uruchamiane po metodach OnInitialized lub OnInitializedAsync przy pierwszym renderowaniu składnika lub po metodzie w kolejnym renderowaniu SetParametersAsync . Podobnie jak SetParametersAsyncmetody , te metody są zawsze wywoływane, nawet jeśli składnik nie ma parametrów.
Użyj jednej z metod, aby ukończyć zadania inicjowania, które zależą od wartości parametrów składnika, takich jak obliczanie wartości dla obliczonych właściwości. Nie należy wykonywać długotrwałych operacji, takich jak te w konstruktorze. Konstruktory są synchroniczne i oczekują na ukończenie długotrwałych operacji wpływa na czas odpowiedzi strony zawierającej składnik.
Metody OnAfterRender i OnAfterRenderAsync
Metody OnAfterRenderi OnAfterRenderAsync są uruchamiane za każdym razem, gdy środowisko uruchomieniowe platformy Blazor musi zaktualizować widok reprezentowany przez składnik w interfejsie użytkownika. Ten stan występuje automatycznie, gdy:
- Stan składnika zmienia się, na przykład po
OnInitializeduruchomieniu metodOnParametersSetlub lubOnInitializedAsyncmetod iOnParametersSetAsync. - Zdarzenie interfejsu użytkownika jest wyzwalane.
- Kod aplikacji wywołuje metodę
StateHasChangedskładnika.
Gdy StateHasChanged jest wywoływana, albo z zewnętrznego zdarzenia lub wyzwalacza interfejsu użytkownika, składnik warunkowo rerenders. Poniższa lista zawiera szczegółowe informacje o kolejności wywołań metod, w tym i następujących :StateHasChanged
- StateHasChanged: Składnik jest oznaczony jako potrzebny do rerender.
- ShouldRender: zwraca flagę wskazującą, czy składnik powinien być renderowany.
- BuildRenderTree: Renderuje składnik.
Metoda StateHasChanged wywołuje metodę ShouldRender składnika. Celem tej metody jest określenie, czy zmiana stanu wymaga, aby składnik rerender widoku. Domyślnie wszystkie zmiany stanu wyzwalają operację renderowania, ale można zastąpić ShouldRender metodę i zdefiniować logikę podejmowania decyzji. Metoda ShouldRender zwraca true wartość , jeśli widok powinien zostać ponownie renderowany lub false w inny sposób.
Jeśli składnik wymaga renderowania, możesz użyć BuildRenderTree metody do wygenerowania modelu, który może zaktualizować wersję modelu DOM używanego przez przeglądarkę do wyświetlania interfejsu użytkownika. Możesz użyć domyślnej implementacji metody udostępnianej przez ComponentBase klasę lub zastąpić ją logiką niestandardową, jeśli masz określone wymagania.
Następnie widok składnika jest renderowany i interfejs użytkownika jest aktualizowany. Na koniec składnik uruchamia OnAfterRender metody i OnAfterRenderAsync . W tym momencie interfejs użytkownika jest w pełni funkcjonalny i można wchodzić w interakcje z językiem JavaScript i dowolnymi elementami w modelu DOM. Użyj tych metod, aby wykonać inne kroki, które wymagają dostępu do w pełni renderowanej zawartości, takich jak wywoływanie kodu JavaScript z międzyoperacji JS.
Metody OnAfterRender i OnAfterRenderAsync przyjmują parametr logiczny o nazwie firstRender. Ten parametr jest true pierwszym uruchomieniem metod, ale false później. Ten parametr można ocenić, aby wykonać jednorazowe operacje, które mogą być marnujące i zbyt intensywnie obciążające zasoby, jeśli są powtarzane za każdym razem, gdy składnik jest renderowany.
Uwaga
Nie należy mylić prerenderingu z pierwszym renderowaniem dla składnika Blazor. Wstępne przetwarzanie ma miejsce przed nawiązaniem połączenia usługi SignalR z przeglądarką i generuje statyczną wersję strony. Pierwszy renderowanie występuje, gdy połączenie z przeglądarką jest w pełni aktywne, a wszystkie funkcje są dostępne.
Metody Dispose i DisposeAsync
Podobnie jak w przypadku każdej klasy platformy .NET składnik Platformy Blazor może używać zarządzanych i niezarządzanych zasobów. Środowisko uruchomieniowe automatycznie odzyskuje zarządzane zasoby. Należy jednak zaimplementować IDisposable interfejsy lub IAsyncDisposable i udostępnić metodę Dispose lub DisposeAsync , aby zwolnić wszystkie niezarządzane zasoby. Dzięki temu zmniejsza się prawdopodobieństwo przecieków pamięci na serwerze.
Obsługa wyjątków w metodach cyklu życia
Jeśli metoda cyklu życia składnika Blazor zakończy się niepowodzeniem, zamknie połączenie usługi SignalR z przeglądarką, co z kolei spowoduje, że aplikacja Blazor przestanie działać. Aby zapobiec temu wynikowi, upewnij się, że jesteś przygotowany do obsługi wyjątków w ramach logiki metod cyklu życia. Aby uzyskać więcej informacji, zobacz Obsługa błędów w aplikacjach platformy ASP.NET Core Blazor.