Blazor页面数据加载：选OnInitializedAsync还是OnAfterRenderAsync(true)？

优先选择OnInitializedAsync() #

• 这是Blazor组件初始化阶段的标准异步方法，组件首次创建时只会执行一次，不需要额外加布尔值控制重复加载。Blazor的生命周期机制已经保证了它不会被重复触发，除非组件被销毁后重新实例化。
• 若是Server模式，组件可能因连接重连重新初始化，这种场景下重新加载数据属于正常的状态恢复，是合理的。

优化空页面体验的小方案 #

加载数据时可以显示加载状态，避免页面空荡，示例代码如下：

@if (isLoading)
{
    <p>加载中...</p>
}
else
{
    <!-- 渲染数据内容 -->
    @foreach (var item in dataList)
    {
        <div>@item.Name</div>
    }
}

@code {
    private List<DataModel> dataList;
    private bool isLoading;

    protected override async Task OnInitializedAsync()
    {
        isLoading = true;
        try
        {
            dataList = await DataService.GetDataAsync();
        }
        finally
        {
            isLoading = false;
        }
    }
}

其他生命周期方法的适用场景 #

• OnParametersSetAsync()：仅当需要根据组件参数变化重新加载数据时使用，若只是首次加载，用它会导致不必要的重复执行。
• OnAfterRenderAsync()：适合处理JS交互逻辑，用来加载数据会先渲染空页面再更新，体验不如OnInitializedAsync()。

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