问blazor组件什么时候呈现？
EN

Stack Overflow用户

提问于 2022-07-19 18:38:59

回答 2查看 449关注 0票数 2

在下面来自此页的图表中，它显示了当调用OnInitializedAsync返回一个不完整的任务时，它将等待任务，然后呈现组件。

但是，返回不完整任务时实际发生的情况似乎是立即呈现组件，然后在不完整任务完成后再次呈现。

页面后面的一个例子似乎证实了这一点。如果组件没有在调用OnInitializedAsync之后立即呈现，而是在任务返回完成后第一次呈现，那么您将永远不会看到“加载.”。消息。

OnParametersSetAsync行为显示为相同。它在返回不完整的任务时立即呈现一次，然后在该任务完成后再呈现一次。

我是误解了呈现生命周期，还是文档中的错误？

谢谢

@page "/fetchdata"
@using BlazorSample.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);
    }
}

async-await

blazor

rendering

blazor-webassembly

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-07-20 01:42:58

要完全回答您的问题，我们需要深入研究ComponentBase代码。

您的代码正在异步世界中运行，在这个世界中，代码块可以产生并将控制权还给调用者--您的“不完整任务被返回”。

当组件第一次呈现时，当任何参数发生更改时，渲染器都会调用SetParametersAsync。

public virtual Task SetParametersAsync(ParameterView parameters)
{
    parameters.SetParameterProperties(this);
    if (!_initialized)
    {
        _initialized = true;
        return RunInitAndSetParametersAsync();
    }
    else
        return CallOnParametersSetAsync();
}

RunInitAndSetParametersAsync负责初始化。我留下了comments的评论，其中解释了StateHasChanged调用。

private async Task RunInitAndSetParametersAsync()
{
    OnInitialized();
    var task = OnInitializedAsync();

    if (task.Status != TaskStatus.RanToCompletion && task.Status != TaskStatus.Canceled)
    {
        // Call state has changed here so that we render after the sync part of OnInitAsync has run
        // and wait for it to finish before we continue. If no async work has been done yet, we want
        // to defer calling StateHasChanged up until the first bit of async code happens or until
        // the end. Additionally, we want to avoid calling StateHasChanged if no
        // async work is to be performed.
        StateHasChanged();
        try
        {
            await task;
        }
        catch // avoiding exception filters for AOT runtime support
        {
            if (!task.IsCanceled)
                throw;
        }
        // Don't call StateHasChanged here. CallOnParametersSetAsync should handle that for us.
    }
    await CallOnParametersSetAsync();
}

每次参数更改都会调用CallOnParametersSetAsync。

private Task CallOnParametersSetAsync()
{
    OnParametersSet();
    var task = OnParametersSetAsync();
    // If no async work is to be performed, i.e. the task has already ran to completion
    // or was canceled by the time we got to inspect it, avoid going async and re-invoking
    // StateHasChanged at the culmination of the async work.
    var shouldAwaitTask = task.Status != TaskStatus.RanToCompletion &&
        task.Status != TaskStatus.Canceled;

    // We always call StateHasChanged here as we want to trigger a rerender after OnParametersSet and
    // the synchronous part of OnParametersSetAsync has run.
    StateHasChanged();

    return shouldAwaitTask ?
        CallStateHasChangedOnAsyncCompletion(task) :
        Task.CompletedTask;
}