.NET 8 Blazor Web App中OnInitializedAsync重复触发问题咨询

核心原因 #

这种行为差异源于Blazor Web App与传统WASM/Server的组件生命周期绑定逻辑：

• Blazor WASM：作为纯客户端单页应用，根组件（包含Router外层的自定义组件）在应用启动时仅实例化一次，后续导航是客户端侧的路由切换，不会销毁或重建根组件树，因此OnInitializedAsync仅执行一次。
• Blazor Web App（默认配置）：
  默认采用混合渲染架构，若你使用了InteractiveAuto或InteractiveServer模式，且自定义组件的渲染配置与Router不匹配，就会触发重复初始化：
  1. 若自定义组件为静态渲染、Router为交互式渲染，每次导航时服务器会重新渲染静态层级的组件，导致OnInitializedAsync重复执行；
  2. 若启用了Per-page交互式渲染，每个页面导航会触发服务器端重新初始化交互式组件树，外层自定义组件若属于该树的一部分，也会被重新实例化；
  3. Blazor Web App的Router默认绑定端点路由系统，与传统Blazor的客户端路由逻辑存在差异，部分场景下会触发根组件的重建。

解决办法 #

1. 统一渲染模式：
   在自定义组件顶部添加与Router一致的交互式渲染模式标记，使其进入客户端交互式生命周期，避免服务器端重复渲染：

   @rendermode InteractiveAuto
   
   <div>
       <Router AppAssembly="@typeof(Program).Assembly">
           <!-- 路由内容 -->
       </Router>
   </div>
   

2. 将初始化逻辑封装为单例服务：
   把仅需执行一次的代码封装成单例服务，在Program.cs中注册：

   builder.Services.AddSingleton<AppInitService>();
   

   然后在自定义组件中注入该服务，在OnInitializedAsync中调用初始化方法（添加判断确保仅执行一次）：

   @inject AppInitService InitService
   
   @code {
       protected override async Task OnInitializedAsync()
       {
           await InitService.EnsureInitializedAsync();
       }
   }
   

   服务实现示例：

   public class AppInitService
   {
       private bool _initialized = false;
       private readonly SemaphoreSlim _semaphore = new SemaphoreSlim(1, 1);
       
       public async Task EnsureInitializedAsync()
       {
           if (_initialized) return;
           
           await _semaphore.WaitAsync();
           try
           {
               if (_initialized) return;
               // 执行仅需一次的初始化逻辑
               await Task.Delay(1000);
               _initialized = true;
           }
           finally
           {
               _semaphore.Release();
           }
       }
   }
   

3. 调整组件层级：
   将自定义组件移至MainLayout或其他仅初始化一次的布局组件中，避免被根路由系统的渲染逻辑重复触发。

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