（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<List<BlogArticle>> _blogs;protected override async Task OnParametersSetAsync(){this._blogs = await Http.GetFromJsonAsync<MessageModel<List<BlogArticle>>>("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<MessageModel<List<BlogArticle>>>("http://apk.neters.club/api/Blog/GetBlogsByTypesForMVP?types=" + type);// _blogs2 = _blogs.response;//}protected override async Task OnParametersSetAsync(){this._blogs = await Http.GetFromJsonAsync<MessageModel<List<BlogArticle>>>("http://apk.neters.club/api/Blog/GetBlogsByTypesForMVP?types=" + type);_blogs2 = _blogs.response;num = 0;}

這個時候，我們再點擊標簽切換的時候，就很隨心所欲了。

經過測試已經沒有問題了，你可以體驗一下：
https://mvp.neters.club/

4、其他功能美化

文章編號

除了實現上邊的動態路由以為，還簡單的實現了文章編號的功能：

其實也是很簡單的，而且也簡單的寫了一個填充的擴展——不足2位添0：

/// <summary>/// /// </summary>/// <param name="thisValue"></param>/// <param name="fillDigits">填充位數</param>/// <returns></returns>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的鉤子函數，動態路由，數據綁定有了一定的認識和了解了吧。

下次再見咯。

總結

以上是生活随笔為你收集整理的[Mvp.Blazor] 动态路由与钩子函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。