ASP.NET Core Razor コンポーネントのレンダリング

[アーティクル]
2024/11/12

注意

これは、この記事の最新バージョンではありません。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。詳細については、 .NET および .NET Core サポートポリシーを参照してください。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

この記事では、レンダーするコンポーネントを手動でトリガーするために Razor を呼び出すタイミングなど、ASP.NET Core Blazor アプリの StateHasChanged コンポーネントレンダリングについて説明します。

`ComponentBase` のレンダリング規則

コンポーネントは、親コンポーネントによってコンポーネント階層に最初に追加されるときにレンダリングされる "必要" があります。コンポーネントのレンダリングが必要なのは、このときだけです。コンポーネントでは、その独自のロジックと規則に従って、他のタイミングでレンダリングすることが "できます"。

Razor コンポーネントは ComponentBase 基底クラスから継承されます。これには次のタイミングで再レンダリングをトリガーするロジックが含まれています。

更新された一連のパラメーターを親コンポーネントから適用した後。
カスケードパラメーターの更新された値を適用した後。
イベントが通知され、その独自のイベントハンドラーの 1 つを呼び出した後。
独自の StateHasChanged メソッドを呼び出した後 (「ASP.NET Core Razor コンポーネントのライフサイクル」を参照)。親コンポーネントで StateHasChanged が呼び出されたときに子コンポーネントパラメーターが上書きされないようにする方法のガイダンスについては、「ASP.NET Core Blazor でパラメーターを上書きしないようにする」を参照してください。

次のいずれかに該当する場合、ComponentBase から継承されるコンポーネントの再レンダリングは、パラメーターの更新が理由でスキップされます。

すべてのパラメーターは、既知の型のセット† からのものか、前のパラメーターセットが設定されてから変更されていない任意のプリミティブ型です。

†Blazor フレームワークでは、変更検出のために、一連の組み込み規則と明示的なパラメーター型のチェックが使われます。これらの規則と型はいつでも変更される可能性があります。詳細については、ASP.NET Core リファレンスソースの ChangeDetection API を参照してください。

注意

通常、.NET 参照ソースへのドキュメントリンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウンリストを使います。詳細については、「ASP.NET Core ソースコードのバージョンタグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。
コンポーネントの ShouldRender メソッドをオーバーライドすると、false が返されます (既定の ComponentBase の実装は常に true を返します)。

レンダリングフローを制御する

ほとんどの場合、イベントの発生後は ComponentBase 規則に従って適切な一部のコンポーネント再レンダリングが行われます。通常、開発者は、再レンダリングするコンポーネントと、それらを再レンダリングするタイミングをフレームワークに指示する手動のロジックを用意する必要はありません。フレームワークの規則の全体的な効果は、イベントを受信したコンポーネントが自動的に再レンダリングされることにあります。これにより、パラメーター値が変更された可能性のある子孫コンポーネントの再レンダリングが再帰的にトリガーされます。

フレームワークの規則がパフォーマンスに及ぼす影響と、レンダリングのためにアプリのコンポーネント階層を最適化する方法について詳しくは、「ASP.NET Core Blazor パフォーマンスに関するベストプラクティス」をご覧ください。

ストリーミングレンダリング

静的サーバー側レンダリング (静的 SSR) またはプリレンダリングで "ストリーミングレンダリング" を使用すると、応答ストリーム上でコンテンツの更新がストリーミングされ、完全にレンダリングするために実行時間の長い非同期タスクを実行するコンポーネントのユーザーエクスペリエンスが向上します。

たとえば、ページの読み込み時にデータをレンダリングするために、データベースクエリまたは Web API 呼び出しを長時間実行するコンポーネントを考えてみます。通常、サーバー側コンポーネントのレンダリングの一部として実行される非同期タスクは、レンダリングされた応答が送信される前に完了する必要があるため、ページの読み込みが遅れる可能性があります。ページのレンダリングに大幅な遅延が生じると、ユーザーエクスペリエンスが低下します。ユーザーエクスペリエンスを向上させるために、ストリーミングレンダリングは、非同期操作の実行中にプレースホルダーコンテンツを使用してページ全体をすばやくレンダリングします。操作が完了すると、更新されたコンテンツが同じ応答接続でクライアントに送信され、DOM にパッチが適用されます。

ストリーミングレンダリングを行うには、出力のバッファリングを回避するためにサーバーが必要です。応答データは、データの生成時にクライアントに流れる必要があります。バッファリングを適用するホストの場合、ストリーミングレンダリングの提供レベルは適切に下がり、ストリーミングレンダリングなしでページが読み込まれます。

静的サーバー側レンダリング (静的 SSR) またはプリレンダリングを使用するときにコンテンツ更新プログラムをストリーミングするには、.NET 9 以降の [StreamRendering] 属性 (.NET 8 で [StreamRendering(true)] を使用) をコンポーネントに適用します。更新プログラムをストリーミングすることよりページ上のコンテンツがシフトする可能性があるため、ストリーミングレンダリングを明示的に有効にする必要があります。属性を持たないコンポーネントでは、親コンポーネントでこの機能が使用されている場合、ストリーミングレンダリングが自動的に採用されます。子コンポーネントの属性に false を渡して、その時点で機能を無効にし、コンポーネントサブツリーの下に進みます。属性は、Razor クラスライブラリによって提供されるコンポーネントに適用される場合に機能します。

次の例は、Blazor Web Appから作成されたアプリのコンポーネントに基づいています。 Task.Delay を呼び出すと、気象データの取得が非同期的にシミュレートされます。コンポーネントは、非同期遅延の完了を待たずに、最初にプレースホルダーコンテンツ (「Loading...」) をレンダリングします。非同期遅延が完了し、気象データコンテンツが生成されると、コンテンツは応答にストリーミングされ、天気予報テーブルにパッチが適用されます。

Weather.razor:

razor

@page "/weather"
@attribute [StreamRendering]

...

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        ...
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    ...

    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(500);

        ...

        forecasts = ...
    }
}

UI 更新の抑制 (`ShouldRender`)

ShouldRender は、コンポーネントがレンダリングされるたびに呼び出されます。 ShouldRender をオーバーライドして、UI の更新を管理します。実装によって true が返された場合は、UI が更新されます。

ShouldRender がオーバーライドされる場合でも、コンポーネントは常に最初にレンダリングされます。

ControlRender.razor:

razor

@page "/control-render"

<PageTitle>Control Render</PageTitle>

<h1>Control Render Example</h1>

<label>
    <input type="checkbox" @bind="shouldRender" />
    Should Render?
</label>

<p>Current count: @currentCount</p>

<p>
    <button @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;
    private bool shouldRender = true;

    protected override bool ShouldRender() => shouldRender;

    private void IncrementCount() => currentCount++;
}

razor

@page "/control-render"

<PageTitle>Control Render</PageTitle>

<h1>Control Render Example</h1>

<label>
    <input type="checkbox" @bind="shouldRender" />
    Should Render?
</label>

<p>Current count: @currentCount</p>

<p>
    <button @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;
    private bool shouldRender = true;

    protected override bool ShouldRender() => shouldRender;

    private void IncrementCount() => currentCount++;
}

razor

@page "/control-render"

<label>
    <input type="checkbox" @bind="shouldRender" />
    Should Render?
</label>

<p>Current count: @currentCount</p>

<p>
    <button @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;
    private bool shouldRender = true;

    protected override bool ShouldRender()
    {
        return shouldRender;
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

razor

@page "/control-render"

<label>
    <input type="checkbox" @bind="shouldRender" />
    Should Render?
</label>

<p>Current count: @currentCount</p>

<p>
    <button @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;
    private bool shouldRender = true;

    protected override bool ShouldRender()
    {
        return shouldRender;
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

razor

@page "/control-render"

<label>
    <input type="checkbox" @bind="shouldRender" />
    Should Render?
</label>

<p>Current count: @currentCount</p>

<p>
    <button @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;
    private bool shouldRender = true;

    protected override bool ShouldRender()
    {
        return shouldRender;
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

razor

@page "/control-render"

<label>
    <input type="checkbox" @bind="shouldRender" />
    Should Render?
</label>

<p>Current count: @currentCount</p>

<p>
    <button @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;
    private bool shouldRender = true;

    protected override bool ShouldRender()
    {
        return shouldRender;
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

ShouldRender に関連するパフォーマンスのベストプラクティスについて詳しくは、「ASP.NET Core Blazor パフォーマンスに関するベストプラクティス」をご覧ください。

`StateHasChanged`

StateHasChanged を呼び出すと、アプリのメインスレッドが解放されたときに再レンダリングがエンキューされます。

コンポーネントはレンダリング用にエンキューされ、保留中の再レンダリングが既に存在する場合は再びエンキューされません。コンポーネントがループ内で StateHasChanged を 5 回連続して呼び出した場合、コンポーネントは 1 回だけレンダリングされます。この動作は ComponentBase でエンコードされます。これは、追加のレンダリングをエンキューする前に、最初に再レンダリングがキューに登録されているかどうかを確認します。

コンポーネントは、同じサイクル中に複数回レンダリングできます。これは、コンポーネントが相互に対話する子を持つ場合に一般的に発生します。

親コンポーネントは、複数の子をレンダリングします。
子コンポーネントはレンダリングして、親の更新をトリガーします。
親コンポーネントが新しい状態で再レンダリングされます。

この設計により、必要に応じて StateHasChanged を呼び出すことができます。不要なレンダリングが発生するリスクはありません。 IComponent を直接実装し、コンポーネントのレンダリング時に手動で処理することで、個々のコンポーネントで常にこの動作を制御できます。

カウントをインクリメントし、IncrementCount を呼び出し、カウントをもう一度インクリメントする次の StateHasChanged メソッドについて考えてみましょう。

private void IncrementCount()
{
    currentCount++;
    StateHasChanged();
    currentCount++;
}

デバッガーでコードをステップ実行すると、currentCount++ が呼び出された直後に、最初の StateHasChanged 実行の UI でカウントが更新されると思われる場合があります。ただし、このメソッドの実行に対して同期処理が行われているため、UI にはその時点で更新されたカウントは表示されません。イベントハンドラーが完了するまで、レンダラーでコンポーネントをレンダリングする機会はありません。 UI の表示は、currentCount++で実行の両方に対して増加します。

currentCount++ 行間の何かを待機すると、待機中の呼び出しによってレンダラーがレンダリングされます。これにより、一部の開発者はコンポーネントで 1 ミリ秒の遅延で Delay を呼び出してレンダリングを実行できるようにしていますが、アプリがレンダリングをエンキューするように任意に遅くすることはお勧めしません。

最善の方法は、Task.Yield を待機することです。この方法では、生成されたタスクが継続を実行した後に、コンポーネントがコードを非同期的に処理し、別のバッチで 2 番目のレンダリングを実行して現在のバッチ中にレンダリングするように強制します。

IncrementCount の呼び出しでタスクが生成されたときに、StateHasChanged によってエンキューされたレンダリングが実行されるため、UI を 2 回更新する、次の変更された Task.Yield メソッドを検討してください。

private async Task IncrementCount()
{
    currentCount++;
    StateHasChanged();
    await Task.Yield();
    currentCount++;
}

ただし、StateHasChanged を不必要に呼び出さないように注意してください。これはよくある間違いで、不必要なレンダリングコストがかかる原因になります。次の場合は、コードで StateHasChanged を呼び出す必要はありません。

ComponentBase によってほとんどのルーチンイベントハンドラーに対するレンダリングがトリガーされるため、同期的または非同期的にかかわらず、イベントを定期的に処理する。
によって典型的なライフサイクルイベントに対するレンダリングがトリガーされるため、同期的または非同期的にかかわらず、OnInitialized や OnParametersSetAsyncComponentBase などの典型的なライフサイクルロジックを実装する。

ただし、この記事の次のセクションで説明するケースでは、StateHasChanged を呼び出すことが理にかなっている場合があります。

非同期ハンドラーに複数の非同期フェーズが含まれる
Blazor 再レンダリングおよびイベント処理システムの外部の何かからの呼び出しを受信する
特定のイベントによって再レンダリングされるサブツリーの外部でコンポーネントをレンダリングするには

非同期ハンドラーに複数の非同期フェーズが含まれる

.NET でのタスクの定義方法が理由で、Task の受信側で観察できるのは、中間の非同期状態ではなく、最終的な完了だけとなっています。したがって、ComponentBase で再レンダリングをトリガーできるのは、Task が最初に返されたときと、Task が最終的に完了したときに限られます。フレームワークは、IAsyncEnumerable<T>が一連の中間Taskでデータを返す場合など、他の中間ポイントでコンポーネントを再レンダリングすることを認識することはできません。中間ポイントで再レンダリングを行いたい場合は、それらのポイントで StateHasChanged を呼び出します。

CounterState1 メソッドが実行されるたびにカウントを 4 回更新する以下の IncrementCount コンポーネントについて考えてみましょう。

自動レンダリングは、currentCount の最初と最後のインクリメントの後に行われます。
手動レンダリングは、StateHasChanged がインクリメントされる中間処理ポイントでフレームワークによって再レンダリングが自動的にトリガーされない場合に、currentCount の呼び出しによってトリガーされます。

CounterState1.razor:

razor

@page "/counter-state-1"

<PageTitle>Counter State 1</PageTitle>

<h1>Counter State Example 1</h1>

<p>
    Current count: @currentCount
</p>

<p>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
        // Renders here automatically

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        // Renders here automatically
    }
}

razor

@page "/counter-state-1"

<PageTitle>Counter State 1</PageTitle>

<h1>Counter State Example 1</h1>

<p>
    Current count: @currentCount
</p>

<p>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
        // Renders here automatically

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        // Renders here automatically
    }
}

razor

@page "/counter-state-1"

<p>
    Current count: @currentCount
</p>

<p>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
        // Renders here automatically

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        // Renders here automatically
    }
}

razor

@page "/counter-state-1"

<p>
    Current count: @currentCount
</p>

<p>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
        // Renders here automatically

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        // Renders here automatically
    }
}

razor

@page "/counter-state-1"

<p>
    Current count: @currentCount
</p>

<p>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
        // Renders here automatically

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        // Renders here automatically
    }
}

razor

@page "/counter-state-1"

<p>
    Current count: @currentCount
</p>

<p>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
        // Renders here automatically

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        // Renders here automatically
    }
}

Blazor 再レンダリングおよびイベント処理システムの外部の何かからの呼び出しを受信する

ComponentBase によって認識されるのは、その独自のライフサイクルメソッドと Blazor でトリガーされるイベントのみです。コード内で発生する可能性がある他のイベントについては、ComponentBase によって認識されません。たとえば、C# カスタムデータストアによって発生したイベントは、Blazor によって認識されません。そのようなイベントで再レンダリングをトリガーして、更新された値を UI に表示するためには、StateHasChanged を呼び出します。

CounterState2 を使用してカウントを一定の間隔で更新し、System.Timers.Timer を呼び出して UI を更新する次の StateHasChanged コンポーネントについて考えてみましょう。

OnTimerCallback は、Blazor で管理される再レンダリングフローまたはイベント通知の外部で実行されます。したがって、コールバックでの OnTimerCallback への変更は StateHasChanged によって認識されないため、Blazor で currentCount を呼び出す必要があります。
コンポーネントによって IDisposable が実装されます。この場合、フレームワークによって Timer メソッドが呼び出されると、Dispose が破棄されます。詳しくは、「ASP.NET Core Razor コンポーネントのライフサイクル」をご覧ください。

コールバックは Blazor の同期コンテキストの外部で呼び出されるため、コンポーネントでは OnTimerCallback 内の ComponentBase.InvokeAsync のロジックをラップして、それをレンダラーの同期コンテキストに移動することが必要です。これは、他の UI フレームワーク内の UI スレッドへのマーシャリングに相当します。 StateHasChanged を呼び出すことができるのは、レンダラーの同期コンテキストからのみであり、それ以外の場合は例外がスローされます。

System.InvalidOperationException: "現在のスレッドは Dispatcher に関連付けられていません。レンダリングまたはコンポーネントの状態をトリガーするとき、InvokeAsync() を使用して Dispatcher に実行を切り替えます"

CounterState2.razor:

razor

@page "/counter-state-2"
@using System.Timers
@implements IDisposable

<PageTitle>Counter State 2</PageTitle>

<h1>Counter State Example 2</h1>

<p>
    This counter demonstrates <code>Timer</code> disposal.
</p>

<p>
    Current count: @currentCount
</p>

@code {
    private int currentCount = 0;
    private Timer timer = new(1000);

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            currentCount++;
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();
}

razor

@page "/counter-state-2"
@using System.Timers
@implements IDisposable

<PageTitle>Counter State 2</PageTitle>

<h1>Counter State Example 2</h1>

<p>
    This counter demonstrates <code>Timer</code> disposal.
</p>

<p>
    Current count: @currentCount
</p>

@code {
    private int currentCount = 0;
    private Timer timer = new(1000);

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            currentCount++;
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();
}

razor

@page "/counter-state-2"
@using System.Timers
@implements IDisposable

<h1>Counter with <code>Timer</code> disposal</h1>

<p>
    Current count: @currentCount
</p>

@code {
    private int currentCount = 0;
    private Timer timer = new(1000);

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            currentCount++;
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();
}

razor

@page "/counter-state-2"
@using System.Timers
@implements IDisposable

<h1>Counter with <code>Timer</code> disposal</h1>

<p>
    Current count: @currentCount
</p>

@code {
    private int currentCount = 0;
    private Timer timer = new(1000);

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            currentCount++;
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();
}

razor

@page "/counter-state-2"
@using System.Timers
@implements IDisposable

<h1>Counter with <code>Timer</code> disposal</h1>

<p>
    Current count: @currentCount
</p>

@code {
    private int currentCount = 0;
    private Timer timer = new(1000);

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            currentCount++;
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();
}

razor

@page "/counter-state-2"
@using System.Timers
@implements IDisposable

<h1>Counter with <code>Timer</code> disposal</h1>

<p>
    Current count: @currentCount
</p>

@code {
    private int currentCount = 0;
    private Timer timer = new Timer(1000);

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            currentCount++;
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();
}

特定のイベントによって再レンダリングされるサブツリーの外部でコンポーネントをレンダリングするには

UI では次のことが必要な場合があります。

1 つのコンポーネントにイベントをディスパッチする。
一部の状態を変更する。
イベントを受け取るコンポーネントの子孫ではないまったく別のコンポーネントを再レンダリングする。

このシナリオに対処する方法の 1 つは、複数のコンポーネントに挿入される "状態管理" クラスを、多くの場合は依存関係の挿入 (DI) サービスとして提供することです。状態マネージャー上で 1 つのコンポーネントによってメソッドが呼び出されると、別個のコンポーネントによって受信される C# イベントがその状態マネージャーによって引き起こされます。

状態を管理する方法については、次のリソースを参照してください。

データバインドを使って、「3 つ以上のコンポーネント間でバインドする」。
カスケード値とパラメーターを使って、「コンポーネント階層に渡ってデータを渡す」。
"状態管理" に関する記事のサーバー側メモリ内状態コンテナーサービス (クライアント側と同等) に関するセクション。

状態マネージャーの方法の場合、C# イベントは Blazor レンダリングパイプラインの外側で発生します。状態マネージャーのイベントに応答してレンダリングしたい他のコンポーネントで StateHasChanged を呼び出します。

状態マネージャーの方法は、System.Timers.Timerのに関する前のケースと似ています。実行コールスタックは一般にレンダラーの同期コンテキスト上に残っているため、InvokeAsync の呼び出しは通常必要ありません。 InvokeAsync の呼び出しは、ロジックによって同期コンテキストがエスケープされる場合にのみ必要です (ContinueWith 上で Task が呼び出される場合や、Task を使用して ConfigureAwait(false) が待機される場合など)。詳細については、「Blazor レンダリングおよびイベント処理システムの外部の何かからの呼び出しを受信する」を参照してください。

Blazor Web App の WebAssembly 読み込み進行状況インジケーター

読み込み進行状況インジケーターは、Blazor Web App プロジェクトテンプレートから作成されたアプリには存在しません。 .NET の将来のリリースでは、新しい読み込み進行状況インジケーター機能が計画されています。それまでの間、アプリはカスタムコードを採用して、読み込み進行状況インジケーターを作成できます。詳しくは、「ASP.NET Core Blazor の起動」をご覧ください。

GitHub で Microsoft と共同作業する

このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。詳細については、共同作成者ガイドを参照してください。

ASP.NET Core に関するフィードバック

ASP.NET Core はオープンソースプロジェクトです。フィードバックを提供するにはリンクを選択します。

ドキュメントの問題を開く製品フィードバックの提供

その他のリソース

ドキュメント

ASP.NET Core Razor コンポーネントのライフサイクル

ASP.NET Core Razor コンポーネントのライフサイクルとライフサイクルイベントの使用方法について説明します。
ASP.NET Core Blazor テンプレートコンポーネント

テンプレートコンポーネントで 1 つまたは複数の UI テンプレートをパラメーターとして受け取る方法について学習します。これは、コンポーネントのレンダリングロジックの一部として使用できます。
ASP.NET Core Blazor の値とパラメーターのカスケード

先祖の Razor コンポーネントから子孫のコンポーネントにデータをフローさせる方法について説明します。
ASP.NET Core Razor コンポーネント

Razor 構文、コンポーネントの名前付け、名前空間、コンポーネントパラメーターに関するガイダンスなど、Blazor アプリで Razor コンポーネントを作成して使用する方法について説明します。
ASP.NET Core アプリで Blazorhead コンテンツを制御する

コンポーネントからページタイトルを設定する方法など、アプリで Blazorhead コンテンツを制御する方法について説明します。
ASP.NET Core Blazor のイベント処理

イベント引数の型、イベントのコールバック、既定のブラウザーイベントの管理など、Blazor のイベント処理機能について説明します。
動的にレンダリングされる ASP.NET Core Razor コンポーネント

Blazor アプリで動的にレンダリングされる Razor コンポーネントを使用する方法について説明します。
ASP.NET Core Blazor でパラメーターを上書きしないようにする

再レンダリング時に Blazor アプリのパラメーターを上書きしないようにする方法について説明します。

トレーニング

モジュール

Blazor Web アプリを使ってリッチな対話型コンポーネントを構築する - Training

Blazor アプリを JavaScript コードと相互運用し、テンプレート化されたコンポーネントを使用し、コンポーネントライフサイクルイベントを処理する方法について学習します。

events

Power BI DataViz 世界選手権

2月14日 16時 - 3月31日 16時

4回のチャンスで、会議パッケージを獲得し、ラスベガスのライブグランドフィナーレに参加することができます

詳細情報

次の方法で共有

ASP.NET Core Razor コンポーネントのレンダリング

ComponentBase のレンダリング規則

レンダリング フローを制御する

ストリーミング レンダリング

UI 更新の抑制 (ShouldRender)

StateHasChanged

非同期ハンドラーに複数の非同期フェーズが含まれる

Blazor 再レンダリングおよびイベント処理システムの外部の何かからの呼び出しを受信する

特定のイベントによって再レンダリングされるサブツリーの外部でコンポーネントをレンダリングするには

Blazor Web App の WebAssembly 読み込み進行状況インジケーター

その他のリソース

`ComponentBase` のレンダリング規則

レンダリングフローを制御する

ストリーミングレンダリング

UI 更新の抑制 (`ShouldRender`)

`StateHasChanged`