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

著者: Luke LathamDaniel RothBy Luke Latham and Daniel Roth

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

次の図は、Blazor のライフサイクルを示しています。The following diagrams illustrate the Blazor lifecycle. この記事の後続のセクションで、例を示しながらライフサイクル メソッドを定義します。Lifecycle methods are defined with examples in the following sections of this article.

コンポーネント ライフサイクル イベント:Component lifecycle events:

  1. 要求に対してコンポーネントが初めてレンダリングされる場合は、次のようにします。If the component is rendering for the first time on a request:
    • コンポーネントのインスタンスを作成します。Create the component's instance.
    • プロパティの挿入を実行します。Perform property injection. SetParametersAsync を実行します。Run SetParametersAsync.
    • OnInitialized{Async} を呼び出します。Call OnInitialized{Async}. Task が返された場合、Task が待機され、コンポーネントがレンダリングされます。If a Task is returned, the Task is awaited and the component is rendered. Task が返されない場合は、コンポーネントがレンダリングされます。If a Task isn't returned, the component is rendered.
  2. OnParametersSet{Async} を呼び出し、コンポーネントをレンダリングします。Call OnParametersSet{Async} and render the component. OnParametersSetAsync から Task が返された場合は、Task を待機してから、コンポーネントが再レンダリングされます。If a Task is returned from OnParametersSetAsync, the Task is awaited and then the component is rerendered.

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

ドキュメント オブジェクト モデル (DOM) イベント処理:Document Object Model (DOM) event processing:

  1. イベント ハンドラーが実行されます。The event handler is run.
  2. Task が返された場合、Task を待機してから、コンポーネントがレンダリングされます。If a Task is returned, the Task is awaited and then the component is rendered. Task が返されない場合は、コンポーネントがレンダリングされます。If a Task isn't returned, the component is rendered.

ドキュメント オブジェクト モデル (DOM) イベント処理

Render のライフサイクル:The Render lifecycle:

  1. これがコンポーネントの最初のレンダリングでない場合、または ShouldRenderfalse として評価された場合は、コンポーネントに対して他の操作を実行しないでください。If this isn't the component's first render or ShouldRender is evaluated as false, don't perform further operations on the component.
  2. レンダリング ツリーの差分を作成し、コンポーネントをレンダリングします。Build the render tree diff (difference) and render the component.
  3. DOM が更新されるのを待機します。Await the DOM to update.
  4. OnAfterRender{Async} を呼び出します。Call OnAfterRender{Async}.

Render ライフサイクル

Developer によって StateHasChanged の呼び出しが行われると、結果としてレンダリングが実行されます。Developer calls to StateHasChanged result in a render.

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

パラメーターが設定される前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 set of parameter values for the component 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.SetParametersAsync が呼び出されない場合、カスタム コードでは、必要に応じて受信パラメーター値を解釈できます。If base.SetParametersAsync 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.

イベント ハンドラーが設定されている場合は、破棄時にそれらをアンフックします。If any event handlers are set up, unhook them on disposal. 詳細については、「IDisposable を使用したコンポーネントの破棄」セクションを参照してください。For more information, see the Component disposal with IDisposable section.

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

OnInitializedAsync および OnInitialized は、コンポーネントが、SetParametersAsync でその親コンポーネントから初期パラメーターを受け取った後で初期化されるときに呼び出されます。OnInitializedAsync and OnInitialized are invoked when the component is initialized after having received its initial parameters from its parent component in SetParametersAsync.

コンポーネントが非同期操作を実行し、操作の完了時に更新する必要がある場合は、OnInitializedAsync を使用します。Use OnInitializedAsync when the component performs an asynchronous operation and should refresh when the operation is completed.

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

protected override void OnInitialized()
{
    ...
}

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

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

コンテンツをプリレンダリングする Blazor Server アプリによって、OnInitializedAsync が "2 回" 呼び出されます。Blazor Server apps that prerender their content call OnInitializedAsync twice:

  • コンポーネントが最初にページの一部として静的にレンダリングされるときに 1 回。Once when the component is initially rendered statically as part of the page.
  • ブラウザーがサーバーへの接続を確立するときに 2 回目。A second time when the browser establishes a connection back to the server.

OnInitializedAsync 内で開発者コードが 2 回実行されないようにするには、「プリレンダリング後のステートフル再接続」セクションを参照してください。To prevent developer code in OnInitializedAsync from running twice, see the Stateful reconnection after prerendering section.

Blazor Server アプリをプリレンダリングしている間、ブラウザーとの接続が確立されていないため、JavaScript への呼び出しなどの特定のアクションは実行できません。While a Blazor Server app is prerendering, certain actions, such as calling into JavaScript, aren't possible because a connection with the browser hasn't been established. コンポーネントは、プリレンダリング時に異なるレンダリングが必要になる場合があります。Components may need to render differently when prerendered. 詳細については、「アプリがプリレンダリングされていることを検出する」セクションを参照してください。For more information, see the Detect when the app is prerendering section.

イベント ハンドラーが設定されている場合は、破棄時にそれらをアンフックします。If any event handlers are set up, unhook them on disposal. 詳細については、「IDisposable を使用したコンポーネントの破棄」セクションを参照してください。For more information, see the Component disposal with IDisposable section.

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

OnParametersSetAsync または OnParametersSet が呼び出されます。OnParametersSetAsync or OnParametersSet are called:

  • コンポーネントが OnInitialized または OnInitializedAsync で初期化された後。After the component is initialized in OnInitialized or OnInitializedAsync.
  • 親コンポーネントが再レンダリングし、次のものを提供するとき: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()
{
    ...
}

イベント ハンドラーが設定されている場合は、破棄時にそれらをアンフックします。If any event handlers are set up, unhook them on disposal. 詳細については、「IDisposable を使用したコンポーネントの破棄」セクションを参照してください。For more information, see the Component disposal with IDisposable section.

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

OnAfterRenderAsync および OnAfterRender は、コンポーネントのレンダリングが完了した後に呼び出されます。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)
    {
        ...
    }
}

OnAfterRender および OnAfterRenderAsync " はサーバーでのプリレンダリング プロセス中には呼び出されません"。OnAfterRender and OnAfterRenderAsync aren't called during the prerendering process on the server. メソッドは、プリレンダリングが完了した後にコンポーネントが対話形式でレンダリングされるときに呼び出されます。The methods are called when the component is rendered interactively after prerendering is finished. 次の場合に、アプリによりプリレンダリングされます。When the app prerenders:

  1. コンポーネントがサーバー上で実行され、HTTP 応答でいくつかの静的 HTML マークアップが生成される。The component executes on the server to produce some static HTML markup in the HTTP response. このフェーズでは、OnAfterRenderOnAfterRenderAsync は呼び出されません。During this phase, OnAfterRender and OnAfterRenderAsync aren't called.
  2. ブラウザーで blazor.server.js または blazor.webassembly.js が起動すると、コンポーネントが対話型のレンダリング モードで再起動される。When blazor.server.js or blazor.webassembly.js start up in the browser, the component is restarted in an interactive rendering mode. コンポーネントが再起動されると、アプリはプリレンダリング フェーズでなくなるため、OnAfterRenderOnAfterRenderAsync が呼び出されますAfter a component is restarted, OnAfterRender and OnAfterRenderAsync are called because the app isn't inside the prerendering phase any longer.

イベント ハンドラーが設定されている場合は、破棄時にそれらをアンフックします。If any event handlers are set up, unhook them on disposal. 詳細については、「IDisposable を使用したコンポーネントの破棄」セクションを参照してください。For more information, see the Component disposal with IDisposable section.

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.

詳細については、「ASP.NET Core Blazor WebAssembly パフォーマンスに関するベスト プラクティス」を参照してください。For more information, see ASP.NET Core Blazor WebAssembly パフォーマンスに関するベスト プラクティス.

状態変更State changes

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

StateHasChanged は、EventCallback メソッドに対して自動的に呼び出されます。StateHasChanged is called automatically for EventCallback methods. 詳細については、「ASP.NET Core Blazor のイベント処理」を参照してください。For more information, see ASP.NET Core Blazor のイベント処理.

レンダリング時の不完全な非同期アクションを処理する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 コンポーネントでは、予測データ (forecasts) を非同期に受信するように、OnInitializedAsync がオーバーライドされます。In the FetchData component of the Blazor templates, OnInitializedAsync is overridden to asynchronously 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 Server テンプレートの 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);
    }
}

エラーの処理Handle errors

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

プリレンダリング後のステートフル再接続Stateful reconnection after prerendering

Blazor Server アプリで RenderModeServerPrerendered の場合、コンポーネントは最初にページの一部として静的にレンダリングされます。In a Blazor Server app when RenderMode is ServerPrerendered, the component is initially rendered statically as part of the page. ブラウザーがサーバーへの接続を確立すると、コンポーネントが "再度" レンダリングされ、コンポーネントがやりとりできるようになります。Once the browser establishes a connection back to the server, the component is rendered again, and the component is now interactive. コンポーネントを初期化するための OnInitialized{Async} ライフサイクル メソッドが存在する場合、メソッドは "2 回" 実行されます。If the OnInitialized{Async} lifecycle method for initializing the component is present, the method is executed twice:

  • コンポーネントが静的にプリレンダリングされたとき。When the component is prerendered statically.
  • サーバー接続が確立された後。After the server connection has been established.

これにより、コンポーネントが最終的にレンダリングされるときに、UI に表示されるデータが大幅に変わる可能性があります。This can result in a noticeable change in the data displayed in the UI when the component is finally rendered.

Blazor Server アプリ内の二重レンダリングのシナリオを回避するには、次の手順を行います。To avoid the double-rendering scenario in a Blazor Server app:

  • プリレンダリング中に状態をキャッシュし、アプリの再起動後に状態を取得するために使用できる識別子を渡します。Pass in an identifier that can be used to cache the state during prerendering and to retrieve the state after the app restarts.
  • 識別子をプリレンダリング中に使用して、コンポーネントの状態を保存します。Use the identifier during prerendering to save component state.
  • 識別子をプリレンダリング後に使用して、キャッシュされた状態を取得します。Use the identifier after prerendering to retrieve the cached state.

次のコードは、二重レンダリングを回避するテンプレートベースの Blazor Server アプリ内で更新される WeatherForecastService を示しています。The following code demonstrates an updated WeatherForecastService in a template-based Blazor Server app that avoids the double rendering:

public class WeatherForecastService
{
    private static readonly string[] summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild",
        "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };
    
    public WeatherForecastService(IMemoryCache memoryCache)
    {
        MemoryCache = memoryCache;
    }
    
    public IMemoryCache MemoryCache { get; }

    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
    {
        return MemoryCache.GetOrCreateAsync(startDate, async e =>
        {
            e.SetOptions(new MemoryCacheEntryOptions
            {
                AbsoluteExpirationRelativeToNow = 
                    TimeSpan.FromSeconds(30)
            });

            var rng = new Random();

            await Task.Delay(TimeSpan.FromSeconds(10));

            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = summaries[rng.Next(summaries.Length)]
            }).ToArray();
        });
    }
}

RenderMode の詳細については、「ASP.NET Core Blazor ホスティング モデルの構成」を参照してください。For more information on the RenderMode, see ASP.NET Core Blazor ホスティング モデルの構成.

アプリがプリレンダリングされていることを検出するDetect when the app is prerendering

Blazor サーバー アプリをプリレンダリングしている間、ブラウザーとの接続が確立されていないため、JavaScript への呼び出しなどの特定のアクションは実行できません。While a Blazor Server app is prerendering, certain actions, such as calling into JavaScript, aren't possible because a connection with the browser hasn't been established. コンポーネントは、プリレンダリング時に異なるレンダリングが必要になる場合があります。Components may need to render differently when prerendered.

ブラウザーとの接続が確立されるまで JavaScript の相互運用呼び出しを遅らせるために、OnAfterRenderAsync コンポーネント ライフサイクル イベントを使用できます。To delay JavaScript interop calls until after the connection with the browser is established, you can use the OnAfterRenderAsync component lifecycle event. このイベントは、アプリが完全にレンダリングされ、クライアント接続が確立された後にのみ呼び出されます。This event is only called after the app is fully rendered and the client connection is established.

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<div @ref="divElement">Text during render</div>

@code {
    private ElementReference divElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync(
                "setElementText", divElement, "Text after render");
        }
    }
}

前のコード例では、wwwroot/index.html (Blazor WebAssembly) または Pages/_Host.cshtml (Blazor Server) の <head> 要素内で、setElementText JavaScript 関数を提供します。For the preceding example code, provide a setElementText JavaScript function inside the <head> element of wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server). 関数は JSRuntimeExtensions.InvokeVoidAsync を指定して呼び出され、値を返しません。The function is called with JSRuntimeExtensions.InvokeVoidAsync and doesn't return a value:

<script>
  window.setElementText = (element, text) => element.innerText = text;
</script>

警告

前の例では、デモンストレーションのみを目的として、ドキュメント オブジェクト モデル (DOM) を直接変更しています。The preceding example modifies the Document Object Model (DOM) directly for demonstration purposes only. ほとんどのシナリオにおいて、JavaScript で DOM を直接変更することはお勧めできません。JavaScript が Blazor の変更追跡に影響する可能性があるためです。Directly modifying the DOM with JavaScript isn't recommended in most scenarios because JavaScript can interfere with Blazor's change tracking.

次のコンポーネントは、プリレンダリングと互換性のある方法で、コンポーネントの初期化ロジックの一部として JavaScript の相互運用を使用する方法を示しています。The following component demonstrates how to use JavaScript interop as part of a component's initialization logic in a way that's compatible with prerendering. コンポーネントには、OnAfterRenderAsync 内からレンダリングの更新をトリガーできることが示されています。The component shows that it's possible to trigger a rendering update from inside OnAfterRenderAsync. このシナリオでは、開発者が無限ループを作成しないようにする必要があります。The developer must avoid creating an infinite loop in this scenario.

JSRuntime.InvokeAsync が呼び出されるとき、ElementRef は、以前のライフサイクル メソッドではなく OnAfterRenderAsync でのみ使用されます。コンポーネントがレンダリングされるまで JavaScript 要素が存在しないためです。Where JSRuntime.InvokeAsync is called, ElementRef is only used in OnAfterRenderAsync and not in any earlier lifecycle method because there's no JavaScript element until after the component is rendered.

StateHasChanged は、JavaScript の相互運用呼び出しから取得された新しい状態でコンポーネントを再度レンダリングするために呼び出されます。StateHasChanged is called to rerender the component with the new state obtained from the JavaScript interop call. StateHasChangedinfoFromJsnull である場合にのみ呼び出されるため、このコードで無限ループが作成されることはありません。The code doesn't create an infinite loop because StateHasChanged is only called when infoFromJs is null.

@page "/prerendered-interop"
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<p>
    Get value via JS interop call:
    <strong id="val-get-by-interop">@(infoFromJs ?? "No value yet")</strong>
</p>

Set value via JS interop call:
<div id="val-set-by-interop" @ref="divElement"></div>

@code {
    private string infoFromJs;
    private ElementReference divElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && infoFromJs == null)
        {
            infoFromJs = await JSRuntime.InvokeAsync<string>(
                "setElementText", divElement, "Hello from interop call!");

            StateHasChanged();
        }
    }
}

前のコード例では、wwwroot/index.html (Blazor WebAssembly) または Pages/_Host.cshtml (Blazor Server) の <head> 要素内で、setElementText JavaScript 関数を提供します。For the preceding example code, provide a setElementText JavaScript function inside the <head> element of wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server). 関数は IJSRuntime.InvokeAsync を指定して呼び出され、次の値を返します。The function is called withIJSRuntime.InvokeAsync and returns a value:

<script>
  window.setElementText = (element, text) => {
    element.innerText = text;
    return text;
  };
</script>

警告

前の例では、デモンストレーションのみを目的として、ドキュメント オブジェクト モデル (DOM) を直接変更しています。The preceding example modifies the Document Object Model (DOM) directly for demonstration purposes only. ほとんどのシナリオにおいて、JavaScript で DOM を直接変更することはお勧めできません。JavaScript が Blazor の変更追跡に影響する可能性があるためです。Directly modifying the DOM with JavaScript isn't recommended in most scenarios because JavaScript can interfere with Blazor's change tracking.

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. 破棄は、コンポーネントの初期化中など、いつでも実行できます。Disposal can occur at any time, including during component initialization. 次のコンポーネントでは、@implements IDisposable および Dispose メソッドが使用されます。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.

.NET イベントからイベント ハンドラーのサブスクライブを解除します。Unsubscribe event handlers from .NET events. 次の Blazor フォームの例は、Dispose メソッドでイベント ハンドラーをアンフックする方法を示しています。The following Blazor form examples show how to unhook an event handler in the Dispose method:

  • プライベート フィールドとラムダのアプローチPrivate field and lambda approach

    @implements IDisposable
    
    <EditForm EditContext="@editContext">
    
        ...
    
        <button type="submit" disabled="@formInvalid">Submit</button>
    </EditForm>
    
    @code {
        ...
        private EventHandler<FieldChangedEventArgs> fieldChanged;
    
        protected override void OnInitialized()
        {
            editContext = new EditContext(...);
    
            fieldChanged = (_, __) =>
            {
                ...
            };
    
            editContext.OnFieldChanged += fieldChanged;
        }
    
        public void Dispose()
        {
            editContext.OnFieldChanged -= fieldChanged;
        }
    }
    
  • プライベート メソッドのアプローチPrivate method approach

    @implements IDisposable
    
    <EditForm EditContext="@editContext">
    
        ...
    
        <button type="submit" disabled="@formInvalid">Submit</button>
    </EditForm>
    
    @code {
        ...
    
        protected override void OnInitialized()
        {
            editContext = new EditContext(...);
            editContext.OnFieldChanged += HandleFieldChanged;
        }
    
        private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
        {
            ...
        }
    
        public void Dispose()
        {
            editContext.OnFieldChanged -= HandleFieldChanged;
        }
    }
    

取り消し可能なバックグラウンド作業Cancelable background work

ネットワーク呼び出し (HttpClient) の実行やデータベースとの対話など、コンポーネントによって実行時間の長いバックグラウンド作業が実行されることがよくあります。Components often perform long-running background work, such as making network calls (HttpClient) and interacting with databases. いくつかの状況でシステム リソースを節約するために、バックグラウンド作業を停止することをお勧めします。It's desirable to stop the background work to conserve system resources in several situations. たとえば、ユーザーがコンポーネントの操作を止めても、バックグラウンドの非同期操作は自動的に停止しません。For example, background asynchronous operations don't automatically stop when a user navigates away from a component.

バックグラウンド作業項目の取り消しが必要になるその他の理由には、次のようなものがあります。Other reasons why background work items might require cancellation include:

  • 実行中のバックグラウンド タスクは、不完全な入力データまたは処理パラメーターを使用して開始されました。An executing background task was started with faulty input data or processing parameters.
  • 現在実行中のバックグラウンド作業項目のセットを、新しい作業項目のセットに置き換える必要があります。The current set of executing background work items must be replaced with a new set of work items.
  • 現在実行中のタスクの優先度を変更する必要があります。The priority of currently executing tasks must be changed.
  • アプリをサーバーに再展開するには、シャットダウンする必要があります。The app has to be shut down in order to redeploy it to the server.
  • サーバー リソースが制限され、バックグラウンド作業項目の再スケジュールが必要になりました。Server resources become limited, necessitating the rescheduling of background work items.

コンポーネントに取り消し可能なバックグラウンド作業パターンを実装するには:To implement a cancelable background work pattern in a component:

次に例を示します。In the following example:

  • await Task.Delay(5000, cts.Token); は、実行時間が長い非同期のバックグラウンド作業を表します。await Task.Delay(5000, cts.Token); represents long-running asynchronous background work.
  • BackgroundResourceMethod は、メソッドが呼び出される前に Resource が破棄された場合に開始されない、実行時間が長いバックグラウンド メソッドを表します。BackgroundResourceMethod represents a long-running background method that shouldn't start if the Resource is disposed before the method is called.
@implements IDisposable
@using System.Threading

<button @onclick="LongRunningWork">Trigger long running work</button>

@code {
    private Resource resource = new Resource();
    private CancellationTokenSource cts = new CancellationTokenSource();

    protected async Task LongRunningWork()
    {
        await Task.Delay(5000, cts.Token);

        cts.Token.ThrowIfCancellationRequested();
        resource.BackgroundResourceMethod();
    }

    public void Dispose()
    {
        cts.Cancel();
        cts.Dispose();
        resource.Dispose();
    }

    private class Resource : IDisposable
    {
        private bool disposed;

        public void BackgroundResourceMethod()
        {
            if (disposed)
            {
                throw new ObjectDisposedException(nameof(Resource));
            }
            
            ...
        }
        
        public void Dispose()
        {
            disposed = true;
        }
    }
}

Blazor Server 再接続イベントBlazor Server reconnection events

この記事で説明するコンポーネント ライフサイクル イベントは、Blazor Server の再接続イベント ハンドラーとは別々に動作します。The component lifecycle events covered in this article operate separately from Blazor Server's reconnection event handlers. Blazor Server アプリとクライアントの SignalR 接続が失われた場合には、UI の更新だけが中断されます。When a Blazor Server app loses its SignalR connection to the client, only UI updates are interrupted. その接続が再確立されると、UI の更新が再開されます。UI updates are resumed when the connection is re-established. 回線ハンドラーのイベントと構成の詳細については、「ASP.NET Core Blazor ホスティング モデルの構成」を参照してください。For more information on circuit handler events and configuration, see ASP.NET Core Blazor ホスティング モデルの構成.