ASP.NET Core Blazor ライフサイクルASP.NET Core Blazor lifecycle

Luke LathamおよびDaniel RothBy Luke Latham and Daniel Roth

Blazor framework には、同期および非同期のライフサイクルメソッドが含まれています。The Blazor framework includes synchronous and asynchronous lifecycle methods. コンポーネントの初期化およびレンダリング中にコンポーネントに対して追加の操作を実行するには、ライフサイクルメソッドをオーバーライドします。Override lifecycle methods to perform additional operations on components during component initialization and rendering.

ライフサイクル メソッドLifecycle methods

コンポーネントの初期化メソッドComponent initialization methods

OnInitializedAsyncOnInitialized は、その親コンポーネントから初期パラメーターを受け取った後に、コンポーネントが初期化されるときに呼び出されます。OnInitializedAsync and OnInitialized are invoked when the component is initialized after having received its initial parameters from its parent component. コンポーネントが非同期操作を実行し、操作の完了時に更新する必要がある場合は、OnInitializedAsync を使用します。Use OnInitializedAsync when the component performs an asynchronous operation and should refresh when the operation is completed. これらのメソッドは、コンポーネントが最初にインスタンス化されるときに1回だけ呼び出されます。These methods are only called one time when the component is first instantiated.

同期操作の場合は、OnInitializedをオーバーライドします。For a synchronous operation, override OnInitialized:

protected override void OnInitialized()
{
    ...
}

非同期操作を実行するには、OnInitializedAsync をオーバーライドし、操作で await キーワードを使用します。To perform an asynchronous operation, override OnInitializedAsync and use the await keyword on the operation:

protected override async Task OnInitializedAsync()
{
    await ...
}

パラメーターを設定する前Before parameters are set

SetParametersAsync は、レンダリングツリーのコンポーネントの親によって提供されるパラメーターを設定します。SetParametersAsync sets parameters supplied by the component's parent in the render tree:

public override async Task SetParametersAsync(ParameterView parameters)
{
    await ...

    await base.SetParametersAsync(parameters);
}

ParameterView には、SetParametersAsync が呼び出されるたびに、パラメーター値のセット全体が含まれます。ParameterView contains the entire set of parameter values each time SetParametersAsync is called.

SetParametersAsync の既定の実装では、ParameterViewに対応する値を持つ [Parameter] または [CascadingParameter] 属性を使用して、各プロパティの値を設定します。The default implementation of SetParametersAsync sets the value of each property with the [Parameter] or [CascadingParameter] attribute that has a corresponding value in the ParameterView. ParameterView に対応する値を持たないパラメーターは、変更されずに残ります。Parameters that don't have a corresponding value in ParameterView are left unchanged.

base.SetParametersAync が呼び出されない場合、カスタムコードでは、必要に応じて受信パラメーター値を解釈できます。If base.SetParametersAync isn't invoked, the custom code can interpret the incoming parameters value in any way required. たとえば、受信したパラメーターをクラスのプロパティに割り当てる必要はありません。For example, there's no requirement to assign the incoming parameters to the properties on the class.

パラメーターが設定された後After parameters are set

OnParametersSetAsyncOnParametersSet は次のように呼び出されます。OnParametersSetAsync and OnParametersSet are called:

  • コンポーネントが初期化され、その親コンポーネントからパラメーターの最初のセットを受け取ったとき。When the component is initialized and has received its first set of parameters from its parent component.
  • 親コンポーネントが再レンダリングし、次のものを提供する場合:When the parent component re-renders and supplies:
    • 少なくとも1つのパラメーターが変更された既知のプリミティブ不変型のみです。Only known primitive immutable types of which at least one parameter has changed.
    • 任意の複合型のパラメーター。Any complex-typed parameters. フレームワークは、複合型のパラメーターの値が内部で変更されているかどうかを認識できないため、パラメーターセットは変更済みとして扱われます。The framework can't know whether the values of a complex-typed parameter have mutated internally, so it treats the parameter set as changed.
protected override async Task OnParametersSetAsync()
{
    await ...
}

注意

パラメーターとプロパティ値を適用するときの非同期処理は、OnParametersSetAsync ライフサイクルイベント中に発生する必要があります。Asynchronous work when applying parameters and property values must occur during the OnParametersSetAsync lifecycle event.

protected override void OnParametersSet()
{
    ...
}

コンポーネントのレンダリング後After component render

OnAfterRenderAsyncOnAfterRender は、コンポーネントのレンダリングが完了した後に呼び出されます。OnAfterRenderAsync and OnAfterRender are called after a component has finished rendering. この時点で、要素参照とコンポーネント参照が設定されます。Element and component references are populated at this point. レンダリングされた DOM 要素を操作するサードパーティ製の JavaScript ライブラリをアクティブ化するなど、レンダリングされたコンテンツを使用して追加の初期化手順を実行するには、この段階を使用します。Use this stage to perform additional initialization steps using the rendered content, such as activating third-party JavaScript libraries that operate on the rendered DOM elements.

OnAfterRenderAsyncOnAfterRenderfirstRender パラメーター:The firstRender parameter for OnAfterRenderAsync and OnAfterRender:

  • は、コンポーネントインスタンスを初めて表示するときに true に設定されます。Is set to true the first time that the component instance is rendered.
  • を使用すると、初期化作業が1回だけ実行されるようにすることができます。Can be used to ensure that initialization work is only performed once.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await ...
    }
}

注意

OnAfterRenderAsync のライフサイクルイベント中に、レンダリング直後の非同期作業が発生する必要があります。Asynchronous work immediately after rendering must occur during the OnAfterRenderAsync lifecycle event.

OnAfterRenderAsyncから Task を返した場合でも、フレームワークは、そのタスクが完了すると、コンポーネントに対してさらにレンダリングサイクルをスケジュールしません。Even if you return a Task from OnAfterRenderAsync, the framework doesn't schedule a further render cycle for your component once that task completes. これは、無限のレンダーループを回避するためです。This is to avoid an infinite render loop. これは、返されたタスクが完了すると、さらにレンダリングサイクルをスケジュールする他のライフサイクルメソッドとは異なります。It's different from the other lifecycle methods, which schedule a further render cycle once the returned task completes.

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        ...
    }
}

OnAfterRenderOnAfterRenderAsyncは、サーバーでのプリレンダリング時に呼び出されません。OnAfterRender and OnAfterRenderAsync aren't called when prerendering on the server.

UI 更新の抑制Suppress UI refreshing

ShouldRender をオーバーライドして、UI の更新を抑制します。Override ShouldRender to suppress UI refreshing. 実装によって trueが返された場合は、UI が更新されます。If the implementation returns true, the UI is refreshed:

protected override bool ShouldRender()
{
    var renderUI = true;

    return renderUI;
}

ShouldRender は、コンポーネントがレンダリングされるたびに呼び出されます。ShouldRender is called each time the component is rendered.

ShouldRender がオーバーライドされた場合でも、コンポーネントは常に最初に表示されます。Even if ShouldRender is overridden, the component is always initially rendered.

状態変更State changes

StateHasChanged は、状態が変更されたことをコンポーネントに通知します。StateHasChanged notifies the component that its state has changed. 必要に応じて、StateHasChanged を呼び出すと、コンポーネントが再スローされます。When applicable, calling StateHasChanged causes the component to be rerendered.

レンダー時の不完全な非同期アクションを処理するHandle incomplete async actions at render

ライフサイクルイベントで実行される非同期アクションは、コンポーネントがレンダリングされる前に完了していない可能性があります。Asynchronous actions performed in lifecycle events might not have completed before the component is rendered. ライフサイクルメソッドの実行中に、オブジェクトが null されているか、データが不完全に設定されている可能性があります。Objects might be null or incompletely populated with data while the lifecycle method is executing. オブジェクトが初期化されていることを確認するためのレンダリングロジックを提供します。Provide rendering logic to confirm that objects are initialized. オブジェクトの null中に、プレースホルダー UI 要素 (読み込みメッセージなど) をレンダリングします。Render placeholder UI elements (for example, a loading message) while objects are null.

Blazor テンプレートの FetchData コンポーネントでは、OnInitializedAsync がユーザー receive 予測データ (forecasts) に上書きされます。In the FetchData component of the Blazor templates, OnInitializedAsync is overridden to asychronously receive forecast data (forecasts). forecastsnullと、読み込みメッセージがユーザーに表示されます。When forecasts is null, a loading message is displayed to the user. OnInitializedAsync によって返された Task が完了すると、コンポーネントは更新された状態とピアリングされます。After the Task returned by OnInitializedAsync completes, the component is rerendered with the updated state.

Blazor サーバーテンプレートでのPages/FetchData. razor :Pages/FetchData.razor in the Blazor Server template:

@page "/fetchdata"
@using MyBlazorApp.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (_forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <!-- forecast data in table element content -->
    </table>
}

@code {
    private WeatherForecast[] _forecasts;

    protected override async Task OnInitializedAsync()
    {
        _forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

IDisposable によるコンポーネントの破棄Component disposal with IDisposable

コンポーネントが IDisposableを実装している場合は、コンポーネントが UI から削除されるときにDispose メソッドが呼び出されます。If a component implements IDisposable, the Dispose method is called when the component is removed from the UI. 次のコンポーネントでは、@implements IDisposableDispose メソッドが使用されます。The following component uses @implements IDisposable and the Dispose method:

@using System
@implements IDisposable

...

@code {
    public void Dispose()
    {
        ...
    }
}

注意

Dispose での StateHasChanged の呼び出しはサポートされていません。Calling StateHasChanged in Dispose isn't supported. StateHasChanged は、レンダラーの破棄の一部として呼び出されることがあるため、その時点での UI 更新の要求はサポートされていません。StateHasChanged might be invoked as part of tearing down the renderer, so requesting UI updates at that point isn't supported.

エラーの処理Handle errors

ライフサイクルメソッドの実行中のエラー処理の詳細については、「ASP.NET Core Blazor アプリでのエラーの処理」を参照してください。For information on handling errors during lifecycle method execution, see ASP.NET Core Blazor アプリでのエラーの処理.