Blazorのライフサイクルとは？｜OnInitializedAsyncで初期化処理を理解｜ASP.NET×Blazor入門 3.4

3.4 ライフサイクル（OnInitializedAsync など）

Blazorコンポーネントには、ReactやVueと同様に「ライフサイクルメソッド」が存在します。これにより、コンポーネントの初期化時、パラメータの変更時、描画完了後など、特定のタイミングで処理を挟むことができます。

主なライフサイクルメソッド

• OnInitialized：コンポーネントの初期化時に呼ばれる同期メソッド。
• OnInitializedAsync：非同期初期化に使用。データ取得処理などで使用される。
• OnParametersSet：親からのパラメータが設定されたタイミングで呼ばれる。
• OnParametersSetAsync：上記の非同期版。
• OnAfterRender：コンポーネントのレンダリング直後に呼ばれる。
• OnAfterRenderAsync：非同期のレンダリング後処理に対応。

サンプルコード

@code {
    private string message;

    protected override async Task OnInitializedAsync()
    {
        message = "データ読み込み中...";
        await Task.Delay(1000); // 疑似的な非同期処理
        message = "データ読み込み完了";
    }
}
  

この例では、コンポーネントが初期化されると同時に、非同期でメッセージを更新します。こうした非同期初期化は、API呼び出しや初期データ取得に有用です。

注意点

• OnAfterRenderAsyncは、描画後にDOM操作が必要なときに使う。ただし何度も呼ばれるため、firstRenderで条件分岐するのが一般的です。
• 状態変更を伴う処理では、StateHasChanged()を明示的に呼ぶことで再描画がトリガーされます。

描画後の処理例

@code {
    private bool isInitialized;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(500);
            isInitialized = true;
            StateHasChanged();
        }
    }
}
  

このように、ライフサイクルメソッドを理解することで、Blazorコンポーネントの振る舞いをより柔軟に制御できます。