鸿蒙ZRouter动态路由框架—生命周期管理能力

news2024/11/14 11:02:25

文章目录

      • 基本使用(单个页面生命周期)
      • 页面的全局生命周期监听
      • 工作流程图
      • 源码

ZRouter从1.1.0版本开始支持生命周期函数管理能力,主要有以下特点:

  • 不影响你原有的生命周期业务逻辑,对NavDestination页面保持着零侵入性,整合了组件的通用生命周期函数和NavDestination生命周期函数;
  • 可以让任何一个类具备有与组件的生命周期能力;
  • 不依赖Hvigor插件编译时的能力,不会影响项目编译速度,核心逻辑在运行时执行。

基本使用(单个页面生命周期)

1、在NavDestination或Navigation页面创建LifecycleRegistry实例,并同时使用 @Lifecycle装饰器修饰 ,如下:

@Route({ name: RouterConstants.LIFECYCLE1_VIEW })
@Component
export struct Lifecycle1View {
    // 1、创建LifecycleRegistry
    @Lifecycle lifecycle: LifecycleRegistry = LifecycleRegistry.create(this);
}

2、通过LifecycleRegistry添加观察者对象,建议在aboutToAppear函数中添加,提供了两种方式:

  • lifecycle.addObserver:接收类型是一个对象,可使用字面量对象,若需要使用this,可以将this定义成一个局部变量;另外也可以是new的方式,这样一个类实现了ILifecycleObserver接口,就具有与页面组件同样的生命周期能力。
  • lifecycle.addListener:接收类型是一个函数,可在函数内可直接使用this来更新状态。

字面量对象的方式:

aboutToAppear(): void {
  // 2、使用addObserver设置生命周期函数监听
  // 注意:如果addObserver是字面量对象注册的情况,将this设置局部变量,不然在对象内的this指向并不是组件的实例
  let that = this
  this.lifecycle.addObserver<ILifecycleObserver>({
    aboutToAppear: () => {
      console.log(`${that.tag}aboutToAppear`)
    },
    aboutToDisappear: () => {
      console.log(`${that.tag}aboutToDisappear`)
    },
    onWillAppear(r) {
      console.log(`${that.tag}onWillAppear`, r?.name, r?.navDestinationId)
    },
    onAppear(r) {
      console.log(`${that.tag}onAppear`, r?.name, r?.navDestinationId)
      that.counter++
    },
    onWillShow(r) {
      console.log(`${that.tag}onWillShow `, r?.name, r?.navDestinationId)
    },
    onShown(r) {
      console.log(`${that.tag}onShown `, r?.name, r?.navDestinationId)
    },
    onWillHide(r) {
      console.log(`${that.tag}onWillHide `, r?.name, r?.navDestinationId)
    },
    onHidden(r) {
      console.log(`${that.tag}onHidden `, r?.name, r?.navDestinationId)
    },
    onWillDisappear(r) {
      console.log(`${that.tag}onWillDisappear `, r?.name, r?.navDestinationId)
    },
    onDisappear(r) {
      console.log(`${that.tag}onDisappear `, r?.name, r?.navDestinationId)
    }
  })
}

class类,实现ILifecycleObserver接口的方式:

@Observed
export class LifecycleModel implements ILifecycleObserver {
  private tag = 'LifecycleMgr: '
  loadState: string = "请求数据中..."
  counter: number = 0

  aboutToAppear(): void {
    console.log(this.tag + 'aboutToAppear')
  }

  aboutToDisappear(): void {
    console.log(this.tag + 'aboutToDisappear')
  }

  onWillAppear(info: RouterInfo): void {
    console.log(this.tag + 'onWillAppear')
  }

  onAppear(info: RouterInfo): void {
    console.log(this.tag + 'onAppear')
    // 模拟请求数据
    setTimeout(() => {
      this.counter = 100
    }, 3000)
  }

  onWillShow(info: RouterInfo): void {
    console.log(this.tag + 'onWillShow')
  }

  onShown(info: RouterInfo): void {
    console.log(this.tag + 'onShown')
  }

  onWillHide(info: RouterInfo): void {
    console.log(this.tag + 'onWillHide')
  }

  onHidden(info: RouterInfo): void {
    console.log(this.tag + 'onHidden')
  }

  onWillDisappear(info: RouterInfo): void {
    console.log(this.tag + 'onWillDisappear')
  }

  onDisappear(info: RouterInfo): void {
    console.log(this.tag + 'onDisappear')
  }
}

添加观察者对象,LifecycleModel实现类用@Observed修饰了,在组件内会可以通过viewModel实例来更新状态,如下:

@Component
export struct Lifecycle4View {

  @State viewModel : LifecycleModel = new LifecycleModel()
  @Lifecycle lifecycle: LifecycleRegistry = LifecycleRegistry.create(this);

  aboutToAppear(): void {
    this.lifecycle.addObserver(this.viewModel)
  }

在使用lifecycle.addObserver方式,由于是字面量对象的方法中,this 指向调用该方法的对象,这点要特别注意,直接在方法内使用this会报错,对此我们可以将this设为一个局部变量来引用。

lifecycle.addListener方式,则相对简单些,在箭头函数内可以直接使用this来读写自定义组件的状态值。

this.lifecycle.addListener((e, r) => {
  console.log(this.tag ,'--2--' , e, r?.name ?? "", r?.navDestinationId ?? "")
})

页面的全局生命周期监听

页面的全局生命周期监听设置:

ZRouter.getInstance().addGlobalLifecycleObserver(new GlobalLifecycleObserverImpl())

GlobalLifecycleObserverImpl实现ILifecycleObserver接口即可

注意:其中组件的通用生命周期函数(aboutToAppear、aboutToDisAppear)未必一定会被调用,前提取决于NavDestination页面是否了初始化了LifecycleRegistry对象,这个问题会在后续版本中优化。

工作流程图

在这里插入图片描述

源码

  • OpenHarmony中心仓地址
  • https://gitee.com/common-apps/ZRouter
  • 坚果派社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2239004.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码随想录算法训练营第十九天|理论基础、77. 组合、216.组合总和III、17.电话号码的字母组合

理论基础 文章链接&#xff1a;代码随想录 视频讲解&#xff1a;带你学透回溯算法&#xff08;理论篇&#xff09;| 回溯法精讲&#xff01;_哔哩哔哩_bilibili关于回溯算法&#xff0c;我公众号里已经讲完了&#xff0c;并且将回溯算法专题整理成一本PDF&#xff0c;该PDF共…

uniapp的基本使用(easycom规范和条件编译)和uview组件的安装和使用

文章目录 1、uniapp1.uview组件安装2.uview-plus组件安装 2、条件编译3、easycom规范1.组件路径符合规范2.自定义easycom配置的示例 总结 1、uniapp UniApp的UI组件库&#xff0c;如TMUI、uViewUI、FirstUI、TuniaoUI、ThorUI等&#xff0c;这些组件库适用于Vue3和TypeScript&…

深入探索GDB调试技巧及其底层实现原理

本文分为两个大模块&#xff0c;第一部分记录下本人常用到的GDB的调试方法和技巧&#xff0c;第二部分则尝试分析GDB调试的底层原理。 一、GDB调试 要让程序能被调试&#xff0c;首先得编译成debug版本&#xff0c;当然release版本的也能通过导入符号表来实现调试&#xff0c…

Kubernetes的基本概念

Kubernetes是谷歌以Borg为前身,基于谷歌15年生产环境经验的基础上开源的一个项目,Kubernetes致力于提供跨主机集群的自动部署、扩展、高可用以及运行应用程序容器的平台。 一、资源对象概述 Kubernetes中的基本概念和术语大多是围绕资源对象(Resource Object)来说的,而资…

JavaWeb后端开发案例——苍穹外卖day01

day1遇到问题&#xff1a; 1.前端界面打不开&#xff0c;把nginx.conf文件中localhost:80改成81即可 2.前后端联调时&#xff0c;前端登录没反应&#xff0c;application.yml中默认用的8080端口被占用&#xff0c;就改用了8081端口&#xff0c;修改的时候需要改两个地方&…

(一)<江科大STM32>——软件环境搭建+新建工程步骤

一、软件环境搭建 &#xff08;1&#xff09;安装 Keil5 MDK 文件路径&#xff1a;江科大stm32入门教程资料/Keil5 MDK/MDK524a.EXE&#xff0c;安装即可&#xff0c;路径不能有中文。 &#xff08;2&#xff09;安装器件支持包 文件路径&#xff1a;江科大stm32入门教程资料…

软件开发的各类模型

目录 软件的生命周期 常见开发模型 瀑布模型 螺旋模型 增量模型、迭代模型 敏捷模型 Scrum模型 常见测试模型 V模型 W模型&#xff08;双V模型&#xff09; 软件的生命周期 软件的生命周期包括需求分析&#xff0c;计划&#xff0c;设计&#xff0c;编码&#xff0c;…

ElasticSearch学习笔记一:简单使用

一、前言 该系列的文章用于记录本人从0学习ES的过程&#xff0c;首先会对基本的使用进行讲解。本文默认已经安装了ES单机版本&#xff08;当然后续也会有对应的笔记&#xff09;&#xff0c;且对ES已经有了相对的了解&#xff0c;闲话少叙&#xff0c;书开正文。 二、ES简介 …

C++笔记---异常

1. 异常的概念 1.1 异常和错误 异常通常是指在程序运行中动态出现的非正常情况&#xff0c;这些情况往往是可以预见并可以在不停止程序的情况下动态地进行处理的。 错误通常是指那些会导致程序终止的&#xff0c;无法动态处理的非正常情况。例如&#xff0c;越界访问、栈溢出…

python opencv3

三、图像预处理2 1、图像滤波 为图像滤波通过滤波器得到另一个图像。也就是加深图像之间的间隙&#xff0c;增强视觉效果&#xff1b;也可以模糊化间隙&#xff0c;造成图像的噪点被抹平。 2、卷积核 在深度学习中&#xff0c;卷积核越大&#xff0c;看到的信息越多&#xff0…

ENSP作业——小型园区网

题目 根据上图&#xff0c;可得需求为&#xff1a; 1.配置交换机上的VLAN及IP地址。 2.设置SW1为VLAN 2/3的主根桥&#xff0c;设置SW2为VLAN 20/30的主根桥&#xff0c;且两台交换机互为主备。 3.可以使用super vlan。&#xff08;本次实验中未使用&#xff09; 4.上层通过静…

解决 Vue3、Vite 和 TypeScript 开发环境下跨域的问题,实现前后端数据传递

引言 本文介绍如何在开发环境下解决 Vite 前端&#xff08;端口 3000&#xff09;和后端&#xff08;端口 80&#xff09;之间的跨域问题&#xff1a; 在开发环境中&#xff0c;前端使用的 Vite 端口与后端端口不一致&#xff0c;会产生跨域错误提示&#xff1a; Access to X…

Windows系统中Oracle VM VirtualBox的安装

一.背景 公司安排了师带徒&#xff0c;环境搭建问题一直是初级程序员头疼的事情&#xff0c;我记录一下这些基础的内容&#xff0c;方便初学者。大部分开发者的机器还是windows系统&#xff0c;所以写了怎么安装。 二.版本信息及 操作系统&#xff1a;windows11 家庭版…

uniapp 集成 uview

注意&#xff1a;HBuildX新建项目时必须选择vue2版本&#xff0c;vue3会不支持uview 下载安装方式&#xff1a; uview安装网站&#xff1a;uView2.0重磅发布&#xff0c;利剑出鞘&#xff0c;一统江湖 - DCloud 插件市场 配置&#xff1a; 1.安装sass插件 // 安装sass npm i …

24.11.12 JavaScript2

prompt() confirm() 这些函数 会阻止js解析器(js解析器执行引擎 读取运行js) 执行 不要使用 2history对象 历史记录对象 对应浏览器前进后退按钮 history 在历史记录里 back 前进 forward 后退go 0当前文档 负数 后退n个文档 正数 前进n个文档<!…

STM32cubemx+Proteus仿真和keil5联合调试

前面两步 STM32cubemx生成代码 https://blog.csdn.net/weixin_52733843/article/details/143637304 Proteus新建工程 https://blog.csdn.net/weixin_52733843/article/details/143578853 1 *Proteus仿真联合调试* 在Proteus中&#xff0c;双击STM32F103C6芯片&#xff0c…

信号的解析

信号 1.概念2.接口3.信号产生的过程1.信号的产生1.1信号的产生方式 2.信号的处理3.信号的保存阻塞信号 4.信号集操作函数 1.概念 信号量&#xff08;Semaphore&#xff09;是一个用于多线程或多进程同步的变量。它是操作系统提供的一种同步机制&#xff0c;用于控制多个线程或…

linux-c 使用c语言操作sqlite3数据库-1

一、练习目标 1、目标 1、使用sqlite3_exec执行查询语句&#xff0c;并将查询结果insert到链表中&#xff0c;最后打印链表的内容&#xff1b; 2、使用sqlite3_get_table执行查询语句&#xff0c;并以key&#xff1a;value的方式&#xff0c;打印查询结果。 2、环境准备 2.1、…

软件需求规格书评审报告,系统需求设计申评审,代码和测试过程评审报告,软件各类资质评审资料(word原件)

1.需求规格说明评审报告 2.系统设计评审报告 3.编码与测试评审报告 软件全套资料部分文档清单&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说明书&#xff0c;需求调研计划&#xff0c;用户需求调查单&#xff0…

flink sql同步mysql数据表到mysql

1. 关闭防火墙和selinux systemctl stop firewalld systemctl disable firewalld systemctl status firewalld2.安装java8 yum list java-1.8* yum install java-1.8.0-openjdk* -yjava -version3.下载和部署mysql yum -y install wget wget https://dev.mysql.com/get/Down…