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("组件销毁");
  }
}

 

    原文作者:functionMC
    原文地址: https://www.cnblogs.com/functionMC/p/16295979.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞