Day 07 生命周期(Lifetime)

前面说过自己建立的Service都必须在Startup.cs(Blazor Server)或Program.cs(Blazor WebAssemlby)注册,但有些基本Service就不用自己做了。

目前Blazor提供内建的Service有三个,分别为:

  1. HttpClient:处理http请求,生命周期为Scoped(注意:只有Blazor WebAssembly有提供,Blazor Server必须自己注册)

  2. IJSRuntime:提供Javascript runtime物件处理JS功能,Blazor WebAssembly生命周期为Singleton,Blazor Server生命周期为Scoped

  3. NavigationManager:处理路由导向和状态Blazor WebAssembly生命周期为Singleton,Blazor Server生命周期为Scoped
    生命周期指的就是Component存活的时间,除了SingletonScoped,还有一种Transient

  4. Singleton是指从程序启动到结束都只会有一个实体,所有Component共用一个实体。

  5. Transient则是每次使用该Component时,都会产生一个新实体。

  6. Scoped较为特别,Blazor Server跟Blazor WebAssembly模式不相同,Blazor Server的Scoped是指每次HTTP请求都会产生一个新的实体,但Component之间通过SingalR传递不会产生,微软文件说明「Blazor WebAssembly目前没有DI的概念,Scoped相当於Singleton」。

不过笔者当初看了上述说明也是雾煞煞,直到看了一个影片用GUID示范後才有所明白,我们就来试试看。

首先建立一个介面IGuidService,里面只有一个型别为字串的属性uid,接着建立类别GuidService并实作属性以及建构子让uid承接GUID,再去Startup.csConfigureServices使用AddTransient注册。
https://ithelp.ithome.com.tw/upload/images/20210907/20140893Kq3YC6rNxp.png
https://ithelp.ithome.com.tw/upload/images/20210907/201408930nfiML3KYQ.png
https://ithelp.ithome.com.tw/upload/images/20210907/20140893714J5YYPR6.png

然後建立一个Guid.razor Component,里面只有三行分别定义路由、注入服务以及显示GUID字串,因为这案例很简单所以没用到ComponentBase,所以需要在_Import.razor加入@using BlazorServer.Services,最後为了切换方便,在NavMenu.razor定义一组NavLink指向刚才建立的Guid.razor
https://ithelp.ithome.com.tw/upload/images/20210907/20140893NUDkG8xxsa.pnghttps://ithelp.ithome.com.tw/upload/images/20210907/20140893ep64aW7Amv.pnghttps://ithelp.ithome.com.tw/upload/images/20210907/20140893fJbtWUFpSX.png

启动後不论在Post及Guid页面切换,或是重整页面,都可以看到产生全新的一组GUID,这就是Transient的特性:每次切换都产生新的实体。
https://ithelp.ithome.com.tw/upload/images/20210907/20140893mRqmnsOhnI.png
https://ithelp.ithome.com.tw/upload/images/20210907/20140893BDEYic4cGI.png

接着将注册方式改为Singleton,可以看到就算重整网页,也都是同一组GUID,这就是Singleton的特性:程序启动到结束都只会有一个实体。
https://ithelp.ithome.com.tw/upload/images/20210907/20140893j4aLH8t1pR.png
https://ithelp.ithome.com.tw/upload/images/20210907/201408937a43SEED70.png

最後将注册方式改为Scoped,切换到Post页面再切回来,还是同一组GUID,但重整页面时就会产生新的一组,这就是Scoped的特性:每次产生HTTP请求都会有新的实体,Component之间则不会产生新实体。
https://ithelp.ithome.com.tw/upload/images/20210907/20140893bamcWRcTUp.png
https://ithelp.ithome.com.tw/upload/images/20210907/20140893DBHWG0wrUD.png

上述的例子是以Blazor Server进行,若以Blazor WebAssembly进行,则Singleton会产生跟Blazor Server不同的情况,原因就是Blazor WebAssembly没有服务器,每次重整网页都会将程序下载到浏览器,这是一个全新的HTTP请求,所以SingletonScoped都是只要一重整网页就会产生新的实体。
https://ithelp.ithome.com.tw/upload/images/20210907/20140893RZSGGMFmGH.pnghttps://ithelp.ithome.com.tw/upload/images/20210907/20140893Rnx1lyJOAr.png

注:笔者为了方便省略影片中某些内容,有兴趣的人可以再研究

Ref: Blazor Course - Use ASP.NET Core to Build Full-Stack C# Web Apps

Ref: ASP.NET Core Blazor dependency injection


<<:  RESTful API 在 Amazon Linux 2 上传图片实作-Day 07

>>:  第55天~

中央状态指挥中心- Vuex [续]

Vuex 结构分为 state getters mutations actions 四个部分 Sta...

Day29-终於要进去新手村了-HTML DOM 范例

一样要说明这是由彭彭影片撷取出来的例题 <!DOCTYPE html> <html...

Day3 - 接案网不是拿来接案的

我以前最常用的接案网叫做爱苏活,当年不像现在有这麽多免费的接案社团,大部分都是要付年费才能取得发案者...

[DAY16]跟 Vue.js 认识的30天 - Vue 过渡(转场)及动画效果上篇(`<transition>`)

先看上图来了解 Vue 将动画进入跟离开这 2 种阶段,而在进入跟离开阶段又分别配置了 3 种状态...

[ Day 14 ] 佳评如潮的 React Hooks

今天总算进入到了 React.js 中大名鼎鼎的 React Hooks 这个章节了! 这样讲可能...