阅读 791

手摸手带你入门ionic3(七):生命周期

这一节我们来讲讲界面的生命周期,在此之前需要让大家熟悉下堆栈式导航的相关内容。需要提及的两个概念是,当一个页面对我们是可见的,那它就是active,假如不可见,那就是inactive。堆栈式导航的意思很简单,一幅图可以说明。假设一个场景,从A界面跳转到B界面,然后B界面返回至A界面(注意是返回,不是跳转)界面的堆栈图如下:

default

从A界面跳转到B界面,A界面并没有被销毁,而是被压入堆栈,变得inactive,B界面进入堆栈在最上面,变成active。假如返回至A界面,此时B界面被销毁,而不是inactive,A界面在堆栈最上面,重新变成active。

B界面从被创建,进入堆栈,变成active,然后返回至上一界面,被销毁,这个过程中ionic提供了函数对其进行了监控,也就是生命周期函数。还是先写代码,通过现象来解释:

home.ts

...
constructor(public navCtrl : NavController) {
    console.log("HomePage constructor");
  }

...

  ionViewDidLoad() {
    console.log('HomePage ionViewDidLoad');
  }

  ionViewWillEnter() {
    console.log('HomePage ionViewWillEnter');
  }

  ionViewDidEnter() {
    console.log('HomePage ionViewDidEnter');
  }

  ionViewWillLeave() {
    console.log('HomePage ionViewWillLeave');
  }

  ionViewDidLeave() {
    console.log('HomePage ionViewDidLeave');
  }

  ionViewWillUnload() {
    console.log('HomePage ionViewWillUnload');
  }

  ionViewCanEnter() {
    console.log('HomePage ionViewCanEnter');
  }

  ionViewCanLeave() {
    console.log('HomePage ionViewCanLeave');
  }
复制代码
normal-load.ts

..
constructor(public navCtrl : NavController, public navParams : NavParams) {
    // 变量初始化,获取从上一界面传过来的参数
    console.error("HomePage constructor");
    this.name = this.navParams.get('name');
    this.age = this.navParams.get('age');
  }

  ionViewDidLoad() {
    // 界面加载完成运行,并且只运行一次,在这里可以进行网络请求,订阅事件等操作
    console.error('NormalLoadPage ionViewDidLoad');
  }

  ionViewWillEnter() {
    // 当界面将要成为active的时候运行,用的比较少
    console.error('NormalLoadPage ionViewWillEnter');
  }

  ionViewDidEnter() {
    // 界面每次变成active的时候都会运行,常见的使用场景是每次进入此界面都重新从网络获取数据
    console.error('NormalLoadPage ionViewDidEnter');
  }

  ionViewWillLeave() {
    // 界面将要离开的时候
    console.error('NormalLoadPage ionViewWillLeave');
  }

  ionViewDidLeave() {
    // 界面已经离开的时候,不在是active
    console.error('NormalLoadPage ionViewWillLeave');
  }

  ionViewWillUnload() {
    // 当界面被销毁的时候,这儿可以执行取消订阅等操作
    console.error('NormalLoadPage ionViewWillUnload');
  }

  ionViewCanEnter() {
    // 通过返回true或者false来决定是否可以进入此界面,返回true是可以
    console.error('NormalLoadPage ionViewCanEnter');
  }

  ionViewCanLeave() {
    // 通过返回true或者false来决定是否可以离开此界面,返回true是可以,这儿可以进行判断数据是否提交等操作
    console.error('NormalLoadPage ionViewCanLeave');
  }
复制代码

界面所有相关的生命周期函数都在上面,每个函数中的意思以及相关常见的操作都在注释中,在此不再赘述。

我们在HomePageNormalLoadPage两个界面中写上生命周期函数,然后执行从HomePage跳转到NormalLoadPage,然后返回这个操作。ionic serve运行项目,执行上述操作,然后看下日志,如下图:

default

上图可以看出,并不是HomePage界面的生命周期函数执行完,才执行NormalLoadPage界面的生命周期函数。他们各自的生命周期函数是穿插在一起的。HomePage界面的ionViewWillUnload函数始终没执行,这是因为在堆栈下,只是inactive,并没有被销毁。当NormalLoadPage返回时被销毁,所以它的ionViewWillUnload才执行了。另外HomePageionViewDidLoad只在界面创建的时候执行了一次,从NormalLoadPage返回后界面active的时候并未再次执行,ionViewDidEnter又重新执行了一次。

其他的调用顺序全部在图上,就不解释了。

关注下面的标签,发现更多相似文章
评论