mko*_*mko 2 blazor blazor-server-side
因此,随着发布了asp.net core 3.0和blazor 1.0,我开始使用blazor做一些实际的工作。将Blazor组件代码拆分为背后的代码时,我正在使用以下代码
public class LogoutModel : BlazorComponent
{
}
Run Code Online (Sandbox Code Playgroud)
不幸的是BlazorComponent不再存在,所以我转到ComponentBase。不确定此更改何时发生..
现在我的其余代码看起来像这样
public class LogoutModel : ComponentBase
{
protected override async Task OnInitializedAsync()
{
}
protected override async Task OnParametersSetAsync()
{
}
}
Run Code Online (Sandbox Code Playgroud)
我注意到的是,生命周期方法按以下顺序执行: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>
Run Code Online (Sandbox Code Playgroud)
你可以使用这个方法,并且你只会有一次
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//do something
StateHasChanged();
}
return Task.CompletedTask;
}
Run Code Online (Sandbox Code Playgroud)
我对一个新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
Run Code Online (Sandbox Code Playgroud)
从结果我们可以看到,该组件被加载了两次。
/_Host,必须使用中的以下代码指定该页面,该代码_Host.cshtml首次调用生命周期方法:@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
Run Code Online (Sandbox Code Playgroud)
然后加载资源,包括blazor.server.js。
然后,blazor应用程序开始渲染。
然后将该组件作为blazor组件加载,在其中第二次调用生命周期方法。
尝试替换RenderMode.ServerPrerendered为RenderMode.Server,然后按预期方式运行,即生命周期方法仅被调用一次(blazor应用程序启动时)。
结论:默认RenderMode是ServerPrerendered必须意味着blazor应用程序被下载并开始之前的mvc可能使成分为静态内容,以显示页面内容,那么当blazor应用程序启动时,它接管页面内容。对于用户体验,这必须是一种变通方法,即浏览器用户可以等待更少的时间来查看内容。
| 归档时间: |
|
| 查看次数: |
298 次 |
| 最近记录: |