Blazor(MAUI Hybrid)页面生命周期疑问：UI为何延迟渲染？

核心问题出在你OnAfterRenderAsync方法里的无限循环逻辑：你在该方法中启动了一个基于PeriodicTimer的持续循环，这个循环会一直运行直到取消令牌触发，导致OnAfterRenderAsync返回的Task永远无法完成。而Blazor会等待生命周期方法的Task执行完毕，才会完成UI的最终渲染并显示DOM，这就是为什么你的加载指示器和页面迟迟不出现的原因。

概念澄清 #

OnAfterRenderAsync是在组件首次渲染完成后触发，但如果该方法返回的Task未结束，Blazor会认为组件的初始化流程仍在进行，不会推进后续的UI更新流程。你这里的循环逻辑把OnAfterRenderAsync变成了一个长期挂起的方法，直接阻塞了UI渲染。

修复方案 #

把长期运行的定时任务从OnAfterRenderAsync中剥离，用后台任务的方式启动，让OnAfterRenderAsync可以立即返回，不阻塞UI：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {   
        // 确保首次数据获取异步执行，避免同步阻塞
        await GetData();

        // 启动后台定时任务，不等待其完成，让OnAfterRenderAsync直接结束
        _ = Task.Run(async () =>
        {
            using var timer = new PeriodicTimer(TimeSpan.FromSeconds(15));
            while (!_timerCancellationToken.IsCancellationRequested && await timer.WaitForNextTickAsync())
            {
                // 更新UI的操作必须在Blazor同步上下文执行，所以用InvokeAsync包裹
                await InvokeAsync(() => GetData());
            }
        }, _timerCancellationToken);

        return;
    }
}

额外注意事项 #

1. 确保GetData异步化：如果GetData内部有同步的耗时操作，要把这部分逻辑放到后台线程执行，再通过InvokeAsync更新组件状态，避免阻塞主线程。
2. 组件销毁时取消任务：实现IDisposable接口，在Dispose方法中触发_timerCancellationToken的取消操作，防止内存泄漏：

   public void Dispose()
   {
       _timerCancellationTokenSource.Cancel();
       _timerCancellationTokenSource.Dispose();
   }
   

3. UI更新必须在同步上下文：所有修改组件属性、触发UI刷新的操作，都要通过InvokeAsync包裹，确保在Blazor的主线程执行，否则可能导致UI不更新或抛出异常。

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