Blazor アプリケーションのライフサイクルに関するメソッド/イベントについて紹介します。
Blazorアプリケーションでページが表示される際にrazorコンポーネントの表示が実行されます。実行時にはイベントが実行され、ページ表示時に必要な初期アk処理を実装できます。この記事では、razorコンポーネントの基底クラスのComponentBase クラスのイベントのメソッドを紹介しつつ、それぞれのメソッドがどの順序で呼び出されるかを紹介します。
下記のプログラムを作成します。
ASP.NET Core Webアプリケーションを作成します。プロジェクトの作成はこちらの記事を参照して下さい。
App.razor, _Imports.razor, フォールバックページの Pages/_Host.cshtml のファイルを作成します。コートは下記のとおりです。
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
<LayoutView>
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
今回のコードではモデルファイル"_Host.cshtml.cs"を作成していますが、モデルファイルは無くてもかまいません。
@page
@model BlazorLifecycle.Pages._HostModel
@namespace BlazorLifecycle.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
画面を作成します。Pages フォルダ内に Main.razor ファイルを作成します。合わせて Main.razor.cs ファイルも作成します。コードは下記になります。
@pageディレクティブを追加し"/Main"のルーティング先に指定します。また、@inherties ディレクティブを記述し MainModelクラスを参照できる設定にします。
@page "/Main"
@inherits MainModel
<h3>Main</h3>
<p>メイン画面です。</p>
@code {
}
Main.razor.cs には、OnInitialized, OnInitializedAsync, OnParametersSet, OnParametersSet, OnParametersSetAsync, OnAfterRender, OnAfterRenderAsync，ShouldRender のメソッドを実装します。いずれのメソッドも基底クラスのComponentBaseに実装されているメソッドでオーバーライドして実装します。イベントの処理では Debug.WriteLine メソッドを呼び出しメソッドが呼び出された旨のメッセージのログを出力します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Diagnostics;
namespace BlazorLifecycle.Pages
{
public class MainModel : ComponentBase
{
protected override void OnInitialized()
{
Debug.WriteLine("OnInitialized が実行されました。");
}
protected override async Task OnInitializedAsync()
{
Debug.WriteLine("OnInitializedAsync が実行されました。");
await Task.Delay(1000);
}
protected override void OnParametersSet()
{
Debug.WriteLine("OnParametersSet が実行されました。");
}
protected override async Task OnParametersSetAsync()
{
Debug.WriteLine("OnParametersSetAsync が実行されました。");
await Task.Delay(1000);
}
protected override void OnAfterRender(bool firstRender)
{
Debug.WriteLine("OnAfterRender が実行されました。" + firstRender.ToString());
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
Debug.WriteLine("OnAfterRenderAsync が実行されました。" + firstRender.ToString());
await Task.Delay(1000);
}
protected override bool ShouldRender()
{
Debug.WriteLine("ShouldRender が実行されました。");
return true;
}
}
}
実装完了後のソリューションエクスプローラーの状態です。
(アプリケーションルートURL)/Main のURLにアクセスします。下図の画面が表示されます。
Visual Studio の出力ウィンドウを確認します。メッセージが出力されています。
メッセージの出力は下記になります。
同期メソッドと非同期メソッド、(OnInitializedメソッドの場合は、OnInitialized メソッドとOnInitializedAsync メソッド)の呼び出し順は先に同期メソッドである、OnInitializedメソッドの呼び出しが実行され、その後非同期メソッドのOnInitializedAsync のメソッドが呼び出されます。OnAfterRender, OnParametersSet, OnAfterRenderのイベントの場合も同様で、同期メソッドが呼び出された後に、非同期メソッドが呼び出されます。~
呼び出し順は OnInitialized, OnAfterRender, OnParametersSet, ShouldRender, OnAfterRender の順になります。ページ表示時の初回のOnAfterRenderは第一引数の値が Trueになり、以後の呼び出しでは第一引数の値はFalseになります。ShouldRenderが呼び出されレンダリングが実行された後にOnAfterRender が呼び出されます。
