コンポーネントのライフサイクル

導入

Blazorのコンポーネントにも、生成→描画→更新というライフサイクルがあります。特に「表示前にデータを読み込む」OnInitializedAsyncは、APIからデータを取ってくる実務で必須です（非同期・HTTPがそのまま活きます）。ここは実際のプロジェクトで動かす内容なので読み物です。

説明

主なライフサイクルメソッドは次の流れで呼ばれます。

flowchart TB
    I["OnInitialized / OnInitializedAsync<br/>生成時に1回（初期データ取得）"] --> R["レンダリング（描画）"]
    R --> P["OnParametersSet<br/>パラメータ変更時"]
    P --> R2["再レンダリング"]
    R2 --> A["OnAfterRender<br/>描画後（JS連携など）"]

表示前にAPIからデータを取って一覧表示する、典型的な形はこうです。

@if (users == null)
{
    <p>読み込み中...</p>
}
else
{
    <ul>
        @foreach (var u in users)
        {
            <li>@u.Name</li>
        }
    </ul>
}

@code {
    private List<User>? users;

    // 生成時に1回だけ呼ばれる。async でAPIを待てる
    protected override async Task OnInitializedAsync()
    {
        using var client = new HttpClient();
        users = await client.GetFromJsonAsync<List<User>>("https://example.com/api/users");
    }

    record User(int Id, string Name);
}

• OnInitializedAsyncは生成時に1回（初期データ取得の定番）。async/awaitでAPIを待てる
• データ取得前はusers == null。「読み込み中…」を@ifで出すのが定石
• OnParametersSetは親から渡る値（パラメータ）が変わったとき、OnAfterRenderは描画後（JS連携で使う）

まとめ

• OnInitializedAsyncは生成時に1回。非同期＋HTTPで初期データを取れる
• 取得前は「読み込み中」を@ifで出す
• ライフサイクルは 生成→描画→（パラメータ変更）→再描画→描画後 の順

次回: 第3章。コンポーネントを部品として再利用する「パラメータ」に進みます。