Общие сведения о жизненном цикле компонента Blazor

Компоненты Blazor имеют четко определенный жизненный цикл, который начинается при первом создании и заканчивается при их уничтожении. Набор событий, происходящих в ответ на определенные триггеры, управляет жизненным циклом компонента. К таким триггерам относятся инициализированный компонент, пользователи, взаимодействующие с компонентом, или страница, на которой находится компонент.

В этом уроке вы узнаете о событиях, происходящих во время жизненного цикла компонента Blazor. Вы увидите, как обрабатывать эти события для оптимизации работы и повышения скорости реагирования страницы Blazor.

Жизненный цикл компонента Blazor

Компоненты Blazor представляют представления в приложениях Blazor, которые определяют макет и логику пользовательского интерфейса. Компоненты создают разметку HTML при запуске приложения. События взаимодействия с пользователем могут активировать пользовательский код, а компоненты можно обновить для перебора дисплея. После закрытия страниц Blazor удаляет компонент и очищает все ресурсы. При возвращении пользователя на страницу создаются новые экземпляры.

На следующей схеме показаны события, происходящие во время существования компонента, и методы, которые можно использовать для обработки этих событий. Blazor предоставляет синхронные и асинхронные версии каждого метода, за исключением SetParametersAsync.

Все компоненты Blazor происходят от ComponentBase класса или IComponent интерфейса, который определяет методы и обеспечивает поведение по умолчанию. Событие обрабатывается путем переопределения соответствующего метода.

Хотя схема подразумевает, что между методами жизненного цикла существует однопоточный поток, асинхронные версии этих методов позволяют приложению Blazor ускорить процесс отрисовки. Например, при первом await возникновении компонента SetParametersAsyncBlazor запускается OnInitialized и OnInitializedAsync методы. После завершения ожидаемой инструкции поток выполнения возобновляется SetParametersAsync .

Одна и та же логика применяется в ряде методов жизненного цикла. Кроме того, каждая await операция, осуществляемая во время OnInitializedAsync и OnParametersSetAsync, указывает, что состояние компонента изменилось и может активировать немедленную отрисовку страницы. Страница может быть отрисована несколько раз до полного завершения инициализации.

Общие сведения о методах жизненного цикла

Каждый метод жизненного цикла компонента имеет определенную цель, и вы можете переопределить методы для добавления пользовательской логики в компонент. В следующей таблице перечислены методы жизненного цикла в том порядке, в котором они происходят, и описывается их назначение.

Метод SetParametersAsync

Когда пользователь посещает страницу, содержащую компонент Blazor, среда выполнения Blazor создает новый экземпляр компонента и запускает конструктор по умолчанию. После создания компонента среда выполнения Blazor вызывает SetParametersAsync метод.

Если компонент определяет какие-либо параметры, среда выполнения Blazor внедряет значения этих параметров из вызывающей среды в компонент. Эти параметры содержатся в объекте ParameterView и становятся доступными SetParametersAsync для метода. Метод вызывается base.SetParametersAsync для заполнения Parameter свойств компонента этими значениями.

Кроме того, если необходимо обрабатывать параметры по-другому, этот метод является местом для этого. Например, может потребоваться проверка всех параметров, переданных компоненту, перед их использованием.

Методы OnInitialized и OnInitializedAsync

Можно переопределить OnInitialized методы и OnInitializedAsync включить пользовательские функции. Эти методы выполняются после того, как SetParametersAsync метод заполняет свойства на основе параметров компонента, которые атрибутируются либоParameterAttribute.CascadingParameterAttribute Логика инициализации выполняется в этих методах.

render-mode Если для свойства приложения задано Serverзначение , OnInitializedOnInitializedAsync методы выполняются только один раз для экземпляра компонента. Если родительский элемент компонента изменяет параметры компонента, SetParametersAsync метод выполняется снова, но эти методы не выполняются. Если необходимо повторно инициализировать компонент при изменении параметров, используйте SetParametersAsync этот метод. Если необходимо выполнить инициализацию один раз, используйте указанные методы.

render-mode Если для свойства задано ServerPrerenderedзначение , OnInitialized методы OnInitializedAsync выполняются дважды: один раз во время этапа предварительной подготовки, который создает статические выходные данные страницы, и снова, когда сервер устанавливает соединение SignalR с браузером. В этих методах могут выполняться дорогостоящие задачи инициализации, например получение данных из веб-службы, используемой для задания состояния компонента Blazor. В этом случае кэшируйте сведения о состоянии во время первого выполнения и повторно использует сохраненное состояние во время второго выполнения.

Все зависимости, которые использует компонент Blazor, внедряются после создания экземпляра, но до выполнения методов OnInitialized или OnInitializedAsync. Объекты, введенные этими зависимостями, можно использовать в OnInitialized или OnInitializedAsync методах, но не раньше.

На этапе предварительной подготовки код в компоненте Blazor Server не может выполнять действия, требующие подключения к браузеру, например вызов кода JavaScript. Следует поместить логику, которая зависит от подключения к браузеру в OnAfterRender или OnAfterRenderAsync методах.

Методы OnParametersSet и OnParametersSetAsync

Методы OnParametersSet выполняются после OnParametersSetAsync первого отрисовки компонента или OnInitialized после последующей OnInitializedAsync отрисовки SetParametersAsync метода. Например SetParametersAsync, эти методы всегда вызываются, даже если компонент не имеет параметров.

Используйте любой метод для выполнения задач инициализации, зависящих от значений параметров компонента, таких как вычисление значений для вычисляемых свойств. Не выполняйте длительные операции, такие как в конструкторе. Конструкторы синхронны и ожидают завершения длительных операций, влияющих на скорость реагирования страницы, содержащей компонент.

Методы OnAfterRender и OnAfterRenderAsync

OnAfterRender Методы OnAfterRenderAsyncвыполняются каждый раз, когда среда выполнения Blazor должна обновлять представление, представленное компонентом в пользовательском интерфейсе. Это состояние происходит автоматически, когда:

• Состояние компонента изменяется, например при OnInitializedOnInitializedAsync выполнении методов или OnParametersSet методов.OnParametersSetAsync
• Событие пользовательского интерфейса активируется.
• Код приложения вызывает StateHasChanged метод компонента.

При StateHasChanged вызове из внешнего события или триггера пользовательского интерфейса компонент условно rerenders. В следующем списке описан порядок вызовов методов, включая и следующие StateHasChanged:

1. StateHasChanged: помечает компонент как требующий повторного рендеринга.
2. ShouldRender: возвращает флаг, указывающий, должен ли компонент отображаться.
3. BuildRenderTree: отрисовывает компонент.

Метод StateHasChanged вызывает ShouldRender метод компонента. Цель этого метода — определить, требуется ли изменение состояния компоненту для перебора представления. По умолчанию все изменения состояния активируют операцию отрисовки, но можно переопределить ShouldRender метод и определить логику принятия решений. Метод ShouldRender возвращает true , если представление должно быть отрисовывается повторно или false в противном случае.

Если компоненту требуется отрисовка, можно использовать BuildRenderTree метод для создания модели, которая может обновить версию DOM, используемую браузером для отображения пользовательского интерфейса. Вы можете использовать реализацию метода по умолчанию, которую ComponentBase предоставляет класс, или переопределить ее с помощью пользовательской логики, если у вас есть определенные требования.

Затем представление компонента отрисовывается, а пользовательский интерфейс обновляется. Наконец, компонент запускает OnAfterRender методы и OnAfterRenderAsync методы. На этом этапе пользовательский интерфейс полностью функциональный, и вы можете взаимодействовать с JavaScript и любыми элементами в DOM. Используйте эти методы для выполнения других действий, требующих доступа к полностью отображаемому содержимому, например вызову кода JavaScript из взаимодействия JS.

Методы OnAfterRender принимают логический параметрOnAfterRenderAsync.firstRender Этот параметр имеет значение true при первом запуске методов, но после приобретает значение false. Вы можете воспользоваться этим параметром для выполнения однократных операций, которые окажутся расточительными и ресурсоемкими, если повторяются каждый раз при отрисовке компонента.

Методы Dispose и DisposeAsync

Как и любой класс .NET, компонент Blazor может использовать управляемые и неуправляемые ресурсы. Среда выполнения автоматически освобождает управляемые ресурсы. Однако необходимо реализовать IDisposable интерфейсы или IAsyncDisposable интерфейсы и предоставить Dispose метод DisposeAsync для выпуска неуправляемых ресурсов. Эта практика снижает вероятность утечки памяти на сервере.

Обработка исключений в методах жизненного цикла

Если метод жизненного цикла для компонента Blazor завершается сбоем, оно закрывает подключение SignalR к браузеру, что, в свою очередь, приводит к остановке работы приложения Blazor. Чтобы предотвратить этот результат, убедитесь, что вы готовы обрабатывать исключения в рамках логики методов жизненного цикла. Дополнительные сведения см. в разделе "Обработка ошибок" в приложениях ASP.NET Core Blazor.