为什么 Blazor 生命周期方法会执行两次？

2024-04-13

因此，随着 asp.net core 3.0 和 blazor 1.0 的发布，我开始使用 blazor 进行一些实际工作。将 Blazor 组件代码拆分为后台代码时，我使用以下内容

public class LogoutModel : BlazorComponent
{
}

很遗憾BlazorComponent不再存在，所以我搬到ComponentBase。不知道这个改变是什么时候发生的..

现在我的其余代码看起来像这样

public class LogoutModel : ComponentBase
{
    protected override async Task OnInitializedAsync()
    {
    }

    protected override async Task OnParametersSetAsync()
    {
    }
}

我注意到生命周期方法按以下顺序执行

OnInitializedAsync()
OnParametersSetAsync()
OnInitializedAsync()
OnParametersSetAsync()

我不太确定为什么每个方法都会执行两次。

这就是我的 Blazor 文件的样子

@page  "/account/logout"
@inherits LogoutModel

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    Logout page
</body>
</html>

TL;DR

这是因为预渲染机制将组件初始化为主机页面的一部分_Host.cshtml，这样第一个 http 请求将生成一个主机页面，该主机页面不仅作为 blazor 应用程序的脚本加载器，而且还具有静态渲染的视图。因此，用户可以看到初始视图，而不必等待大致以下步骤：

WebSocket 连接由 SignalR 建立。
第一组渲染指令是从服务器接收的。
渲染指令应用于视图。

这不仅可以缩短用户看到初始视图之前的响应延迟，而且还可以受益SEO https://en.wikipedia.org/wiki/Search_engine_optimization#Getting_indexed。 blazor 应用程序正常启动后，预渲染视图将被真实的 blazor 组件替换。

新项目模板中默认启用预渲染功能，因此您必须选择以下选项之一：

正确处理该组件已预渲染的情况（可能通过检查是否IJSRuntime可以通过依赖注入来解决）。
通过修改禁用预渲染功能_Host.cshtml, 替换

<component type="typeof(App)" render-mode="ServerPrerendered" />

with

<component type="typeof(App)" render-mode="Server" />

对于旧版本，替换

@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))

with

@(await Html.RenderComponentAsync<App>(RenderMode.Server))

原来的答案

我用全新的进行了测试blazorserver项目，在调用生命周期方法时记录日志，并得到以下输出：

info: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[0]
      User profile is available. Using 'C:\Users\Alsein\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: D:\repos\HelloWorld
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/2 GET https://localhost:5001/
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
      Executing endpoint '/_Host'
info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[3]
      Route matched with {page = "/_Host"}. Executing page /_Host
info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[103]
      Executing an implicit handler method - ModelState is Valid
info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[104]
      Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
crit: HelloWorld.MyBase[0]
      OnInitializedAsync
crit: HelloWorld.MyBase[0]
      OnParameterSetAsync
info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[4]
      Executed page /_Host in 122.3724ms
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[1]
      Executed endpoint '/_Host'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished in 216.7341ms 200 text/html; charset=utf-8
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/2 GET https://localhost:5001/css/site.css
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/2 GET https://localhost:5001/_framework/blazor.server.js
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/2 GET https://localhost:5001/css/bootstrap/bootstrap.min.css
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/css/site.css'. Physical path: 'D:\repos\HelloWorld\wwwroot\css\site.css'
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/_framework/blazor.server.js'. Physical path: 'N/A'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished in 44.733000000000004ms 200 text/css
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/css/bootstrap/bootstrap.min.css'. Physical path: 'D:\repos\HelloWorld\wwwroot\css\bootstrap\bootstrap.min.css'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished in 55.3613ms 200 text/css
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished in 55.569900000000004ms 200 application/javascript
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/2 GET https://localhost:5001/css/open-iconic/font/css/open-iconic-bootstrap.min.css
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/css/open-iconic/font/css/open-iconic-bootstrap.min.css'. Physical path: 'D:\repos\HelloWorld\wwwroot\css\open-iconic\font\css\open-iconic-bootstrap.min.css'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished in 4.5189ms 200 text/css
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/2 POST https://localhost:5001/_blazor/negotiate text/plain;charset=UTF-8 0
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/2 GET https://localhost:5001/css/open-iconic/font/fonts/open-iconic.woff
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/css/open-iconic/font/fonts/open-iconic.woff'. Physical path: 'D:\repos\HelloWorld\wwwroot\css\open-iconic\font\fonts\open-iconic.woff'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished in 4.3562ms 200 application/font-woff
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
      Executing endpoint '/_blazor/negotiate'
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[1]
      Executed endpoint '/_blazor/negotiate'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished in 24.7409ms 200 application/json
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/1.1 GET https://localhost:5001/_blazor?id=7oyJvbydrUy9tqlsH_DHzQ
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
      Executing endpoint '/_blazor'
crit: HelloWorld.MyBase[0]
      OnInitializedAsync
crit: HelloWorld.MyBase[0]
      OnParameterSetAsync

从结果中我们可以看到，该组件被加载了两次。

第一次当页面被请求并处理时，它直接作为一个简单的Mvc组件加载/_Host必须用以下代码指定_Host.cshtml，第一次调用生命周期方法：

@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))

然后加载资源包括blazor.server.js.
然后 Blazor 应用开始渲染。
然后该组件作为 blazor 组件加载，其中生命周期方法被第二次调用。

尝试更换RenderMode.ServerPrerendered with RenderMode.Server，然后它的行为符合预期，即生命周期方法仅被调用一次（当 blazor 应用程序启动时）。

结论：默认RenderMode is ServerPrerendered这必定意味着 Mvc 可以将组件渲染为静态内容，以便在 blazor 应用程序下载并启动之前显示页面内容，然后当 blazor 应用程序启动时，它会接管页面内容。这必须是一种解决用户体验的方法，让浏览器用户可以等待更少的时间来查看内容。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)