页面初始化钩子函数_[Mvp.Blazor] 动态路由与钩子函数

(Blazor组件的生命周期函数)

一直在学习也没有停下脚步，用着脑子还是挺好的，感觉可以更脚踏实地一下。

最近偶尔也继续看了看Blazor，毕竟我也开源了一个项目嘛，基本我正式开源的项目都会负责到底，所以该有的功能都要有的

(https://github.com/anjoy8/Blog.MVP.Blazor)

通过几天的学习，感觉愈发的感觉这门技术很棒，主要是很对我的脾气，用c#开发前端组件，生成交互式客户端 Web UI 的框架，一直是我连想象都不敢想的事情，不仅仅是它拥有组件继承、数据绑定、js交互、组件通讯等等前端比较亮眼的功能，最让我开心的就是他同样也有自己的生命周期，也就是文章的标题——钩子函数。要知道生命周期在前端框架开发中，还是有举足轻重的地位的。

那咱们暂时先不说这个钩子，先说下今天要干的事情，如何实现动态路由。

1、为什么要实现动态路由？

咱们先看看我之前是怎么做的，在blazor项目中，我们是这样设计的：

除了新增和删除外，就是展示页面，主要是按照一定的分类进行展示，所以呢，当时我为了图省事，每一个分类一个页面，每个页面发送同样的请求，所以基本的代码都一样：

每个页面定义各自的路由地址：

@page "/aspnetcore-abp-blazor/2020"@page "/identityserver4/2020"@page "/azure/2020"

纯手动硬编码操作，虽然创建了一个自定义组件，但是这种开发模式肯定是不可取的，不仅从软件开发上没有实现封装，而且在后期多个分类的时候，还要去创建页面，无法实现多态的，所以基于这个想法呢，我就觉得做个动态路由，其实在MVC开发中，也就是我们特别常见，也是玩腻的操作——把分类做个url参数来实现。

那具体如何实现呢，请继续往下看。

2、如何实现动态路由？

简单翻看官网，我们就看到了很清晰的介绍，然后快速的，大刀阔斧的开发了：

首先删掉那几个手写的分类页面，保留一个List.razor组件，Blogs文件夹主要就是实现动态展示，然后Post文件夹，用来进行修改和新增，更像是一个后台管理，而且是带权限那种(这里埋一个坑吧，目前还是没有研究透如何在Blazor.Server中集成Ids4，以后再看看)。

然后定义动态路由：

@page "/{type}/{year}"@code {    [Parameter]    public string type { get; set; } = "";    [Parameter]    public string year { get; set; } = "2020";    private int num = 0;    private MessageModel> _blogs;    protected override async Task OnParametersSetAsync()    {        this._blogs = await Http.GetFromJsonAsync>>("http://apk.neters.club/api/Blog/GetBlogsByTypesForMVP?types=" + type);        num = 0;    }}

核心的就是配置@page，然后还有定义两个必须是Public的变量参数，注意要增加特性[Parameter]，不然就是普通的变量，从而无法url获取到指定的值。

看似一切很正常，也是和我想的一样，通过不同的url来访问，就能获取指定的内容，但是这个时候有一个小问题，如果在当前页面内，进行标签参数切换的话，就不行了。

但是加载后，跳转到首页，再点另一个分类，这样肯定是可以的。

那这是为什么呢？欸，这就引出了今天的重头戏——生命周期。

3、Blazor的生命周期

Blazor的生命周期与React组件的生命周期类似，分为三个阶段：初始化、运行中和销毁阶段，其相关方法有10个，包括设置参数前、初始化、设置参数之后、组件渲染后以及组件的销毁，但是这些方法有些是重复的，只不过是同步与异步的区别。

我因为有React的基础，所以看起来一目了然，当然如果你没学过React，但是学过Vue也行呀，毕竟我们Vue八个生命周期四个阶段都学过了，三个阶段的Blazor，学起来还不是分分钟的事儿。这就是文章开头的那张流程图。

具体的加载流程呢，我就不一一调试了，反正你打个断点，或者console输出一下，就能大概明白其中的过程是怎样的，这里说说那几个钩子函数：

(同步方法先于异步方法执行)

1	设置参数前	SetParametersAsync
2	初始化	OnInitialized/OnInitializedAsync
3	设置参数后	OnParametersSet/OnParametersSetAsync
4	组件渲染呈现后	OnAfterRender/OnAfterRenderAsync
5	判断是否渲染组件	ShouldRender
6	组件删除前	Dispose
7	通知组件渲染	StateHasChanged

到了这里我们应该明白了，其实我们使用的是OnInitializedAsync钩子，是指我们的页面初始化完成后所执行的方法：

我们第一次访问的时候，肯定是执行一次初始化，但是实现了动态路由以后，在当前页面针对不同的标签进行切换的时候，其实已经不会再走初始化的钩子了。

那我就选择了一个其他的钩子，比如OnParametersSetAsync，设置参数后来实现数据源的获取，修改代码：

 //protected override async Task OnInitializedAsync() //{ //    this._blogs = await Http.GetFromJsonAsync>>("http://apk.neters.club/api/Blog/GetBlogsByTypesForMVP?types=" + type); //    _blogs2 = _blogs.response; //} protected override async Task OnParametersSetAsync() {     this._blogs = await Http.GetFromJsonAsync>>("http://apk.neters.club/api/Blog/GetBlogsByTypesForMVP?types=" + type);     _blogs2 = _blogs.response;     num = 0; }

这个时候，我们再点击标签切换的时候，就很随心所欲了。

经过测试已经没有问题了，你可以体验一下：https://mvp.neters.club/

4、其他功能美化

文章编号

除了实现上边的动态路由以为，还简单的实现了文章编号的功能：

其实也是很简单的，而且也简单的写了一个填充的扩展——不足2位添0：

 ///  ///  ///  ///  /// 填充位数 ///  public static string ObjToStringFill2(this int thisValue, int fillDigits = 2) {     if (thisValue >= 0 && thisValue < 10)     {         return thisValue.ToString().PadLeft(fillDigits, '0');     }     return thisValue.ObjToString(); }

搜索功能

之前我们说过Blazor是支持双向绑定的，那我们就基于这个功能，实现搜索功能：

好啦，今天的内容就暂时到这里了，通过很小的功能，相信你应该对Blazor的钩子函数，动态路由，数据绑定有了一定的认识和了解了吧。

下次再见咯。