Blazor组件何时渲染？异步生命周期方法渲染行为的疑问

根据微软文档中的示意图描述，当OnInitializedAsync返回未完成的Task时，会等待任务完成后再渲染组件。但实际测试发现，组件会立即进行首次渲染，待异步任务完成后再重新渲染一次。文档后续的示例也印证了这一点——如果组件仅在任务完成后才首次渲染，用户就无法看到示例中的“Loading...”提示。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);
    }
}

解答 #

你的实际测试结果是正确的，文档的示意图描述存在表述不准确的地方。Blazor组件在异步生命周期方法（如OnInitializedAsync、OnParametersSetAsync）执行时，并不会等待任务完成才首次渲染，而是遵循以下流程：

• 首次同步渲染：组件初始化时，先执行同步逻辑，随后触发首次渲染。此时异步任务尚未完成，因此能显示“Loading...”这类未加载完成的UI状态。
• 异步任务执行：首次渲染完成后，Blazor会等待OnInitializedAsync返回的Task执行完毕。
• 二次渲染：异步任务完成后，组件状态（比如示例中的forecasts变量）更新，Blazor会触发二次渲染，展示加载完成后的内容。

这种设计是为了优化用户体验——避免组件长时间处于空白状态，让用户能立即看到加载反馈，而非等待所有异步操作完成后才出现界面。

文档中的示意图大概率是简化了流程描述，忽略了首次渲染的环节，导致理解偏差。而后续的示例代码正好体现了正确的行为逻辑：通过判断forecasts是否为null来切换不同UI状态，这也侧面证明组件会先渲染加载状态，再在异步任务完成后更新UI。

OnParametersSetAsync的行为完全一致：当参数更新触发该方法时，组件会先基于当前参数状态渲染一次，等待异步任务完成后再根据更新后的状态重新渲染。

内容的提问来源于stack exchange，提问作者innominate227