Blazor和Vue对比学习(进阶2.1.1):生命周期,基本理解和使用

一、基本理解

首次接触“生命周期”这个名词,是比较晦涩的,Vue中又有生命周期钩子,而Blazor则是虚方法重写,容易蒙。所以,我尝试从初学者的角度来阐述一下。

1、我们在基础部分已经知道,组件有两部分组成,一是逻辑层,有数据和方法(方法本质上也是数据);二是视图层,虽然有自定义组件,但拆到底,还是HTML原生标签。

2、组件的初次呈现,可以先简单的理解为两个过程,第一步,完成逻辑层的实例化,类似于一个类的实例化,为视图层准备数据;第二步,完成视图层DOM的渲染,会使用到逻辑层的数据。这就是生命周期,当然中间过程我们需要继续细化。

3、在这个生命周期中,我们肯定想做两件事情,一是当到达特定阶段时,让我知道,这样我可以执行某些任务;二是我还能根据一些情况的判断,来决定生命周期是否继续执行。

4、为了实现上面的两件事情,Vue为我们准备了不同阶段的生命周期钩子,Blazor则是虚方法。两者的原理是一样的,本质上,是一种命名约定和方法重写。如在完成视图层的DOM渲染后,Vue执行一个名字叫onMounted()的方法,Blazor则执行一个名字叫OnAfterRender()的方法。Vue中,我们使用回调,Blazor中我们通过重写override,就能实现自己想执行的逻辑。

5、Blazor生命周期的使用,更加接近于本质,虚方法和方法重写,有C#基础的,都好理解,而Vue的钩子,虽然易用,但要想整通透了,则更加晦涩一些。如果看Blazor生命周期的源码,里面有很多类似这样的代码:if(某某状态出现){则调用某个方法},条件就是用来判断生命周期到哪个阶段了,方法体中调用的方法就是Blazor的生命周期虚方法,是不是很容易理解?!

 

二、基本使用

两者的语法使用都非常简单,直接在逻辑层,按约定写方法就可以。但要使用得当且灵活运用,还是需要了解每一个生命周期过程的细节,尤其是Blazor,会相对复杂一些。Blazor提供了更加丰富的控制方法,但也提高了使用的复杂度,看产品路线图,未来还会继续增加生命函数。对生命周期细节更深入的学习,我们放到第二节,这节先简单了解一下

1、 Vue的生命周期钩子,作为API导入,方法体中写回调逻辑。

//Vue=======================================  onBeforeMount(()=>{console.log("组件渲染/挂载前")}) onMounted(()=>{console.log('组件渲染/挂载后')})  onBeforeUpdate(()=>{console.log('数据更新前')}) onUpdated(()=>{console.log('数据更新后')})  onBeforeUnmount(()=>{console.log('组件销毁前')}) onUnmounted(()=>{console.log('组件销毁后')})

 

2、Blazor直接重写生命周期函数(方法签名一致),方法体中写自己的逻辑,部分虚函数提供了入参

//Blazor====================================  public override async Task SetParametersAsync(ParameterView parameters) {     Console.WriteLine("参数设置前");      await base.SetParametersAsync(parameters);       //完成内部字段/属性的初始化,收集外部传参数到ParameterView,未给参数属性赋值     //最后执行【base.SetParametersAsync】,给参数属性赋值 }  protected override void OnInitialized() {     Console.WriteLine("组建初始化");      //创建组件实例,完成组件的初始化,此时参数属性已被赋值     //有一个配对的异步函数OnInitializedAsync }  protected override void OnParametersSet() {     Console.WriteLine("参数设置后");      //这个生命函数更像是OnInitialized的备胎     //OnInitialized只在组件初始化时执行一次,参数更新时,并不执行     //所以需要一个生命函数来完成OnInitialized做的事情     //有一个配对的异步函数OnParametersSetAsync }  protected override void OnAfterRender(bool firstRender) {     Console.WriteLine("组件渲染后");      //DOM完成渲染后,此时可以获得最新的ref     //是否渲染DOM,根据虚拟DOM的差量算法     //可能引起渲染:父组件重新渲染、父组件传入的参数属性变化、本组件字段/属性变化、本组件事件执行等     //有一个配对的异步函数OnAfterRenderAsync }  //Dispose不属于生命函数,所以用法比较特别,先实现IDisposable接口,然后调用接口的Dispose方法 //这个设计比较奇怪的,也没有查到这么设计的原因,推断是防止重复执行,因为Dispose是框架层级的一个方法 @implements IDisposable @code {   void IDisposable.Dispose()   {     Console.WriteLine("组件销毁");   } }

 

发表评论

相关文章