Omi框架学习之旅 - 生命周期 及原理说明
生命周期
name | avatars | company |
---|---|---|
constructor | 构造函数 | new的时候 |
install | 初始化安装,这可以拿到用户传进的data进行处理 | 实例化 |
installed | 安装完成,HTML已经插入页面之后执行 | 实例化 |
uninstall | 卸载组件。执行remove方法会触发该事件 | 销毁时 |
beforeUpdate | 更新前 | 存在期 |
afterUpdate | 更新后 | 存在期 |
示意图
以上是官网的,看着让人还是挺明白的。但是我还是喜欢用我的理解解说一把。
生命周期指一个对象的生老病死。具体来说是继承Omi.Component类的子类的实例的生命周期。
1. 当我们 new 子类的时候, 子类的实例会得到Omi.Component类的所以属性和方法。
2. 当我们使用Omi.render方法时,其实调用的是Component类上的_render方法,在这个方法前后会分别调用install和installed方法,就如上图的左边部分。
3. 实例的存在期呢,我们经常会调用updade方法更新dom节点,那在这个update方法之前会分别调用beforeUpdate和afterUpdate,就如上图的右边部分。
4. 实例销毁期,就是就是调用实例的remove方法,期间也会调用update方法(那么必然会调用beforeUpdate,afterUpdate方法),之后呢会调用uninstall方法。就如上图的右下角部分。
老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。
class Timer extends Omi.Component {constructor(data) {super(data);}install() {console.log('install');this.data = {secondsElapsed: 0};}tick() {this.data.secondsElapsed ++;this.update();}installed() {console.log('installed');this.interval = setInterval(() => {this.tick();}, 1000);}uninstall() {console.log('uninstall');clearInterval(this.interval);}style() {return `.num {color: red;}`;}beforeUpdate() {console.log('beforeUpdata');}render() {console.log('render');return `<div>Seconds Elapsed:<span class="num">{{secondsElapsed}}</span></div> `;}afterUpdate() {console.log('afterUpdate');}};var time = new Timer();Omi.render(time, '#app');setTimeout(() => {time.remove();console.log('已卸载!');}, 10000);
demo的疑问和疑问的说明:
疑问1:
Omi.render(time, '#app');的時候是不是就执行了install 和 installed 方法 啊? 答:是的,一般可以在install方法中给实例设置数据, installed方法中update设置好的数据。怎么实现的如下: 上图中的2那个方法主要用来遍历实例是否还有孩子,有的话就遍历孩子,调用孩子的installed方法。如果孩子还有孩子就递归
_childrenInstalled(root){ // 实例root.children.forEach((child) => { // 遍历实例的每一个孩子this._childrenInstalled(child); // 递归(看看自己的孩子还有没有孩子children)child.installed(); // 调用孩子实例installed方法 });}
3那边的代码就执行installed方法。
这就是使用omi.render方法时要走的过程。
疑问2:更新节点使用update方法,这个update到底做了什么? 答:这个的要细细看来了,如下 1 这里调用了beforeUpdate方法。2 这里上面有解释,看代码,如下:
_childrenBeforeUpdate(root) { // 实例的孩子render方法前的回调root.children.forEach((child)=>{child.beforeUpdate(); // 跟新孩子的beforeUpdate方法回调this._childrenBeforeUpdate(child); // 孩子的孩子 });}
3 这里就是重新生成html css 事件转换,但是并不是无脑innerHTML,而是通过morphdom(this.node, this.HTML);来跟新节点的,这个morphdom不是虚拟dom,只是局部跟新dom节点,感兴趣的可以看看他的源码。
4 这里看看代码
_childrenAfterUpdate(root){root.children.forEach((child)=>{this._childrenAfterUpdate(child); // 孩子的孩子的afterUpdate方法child.afterUpdate(); // 孩子的afterUpdate方法 });}
5 那里就是调用自身的afterUpdate()方法,至此结束了。
疑问3: 实例的remove方法帮我们做了啥啊? 答:帮我们update了节点,只不过把节点改成了input节点影藏节点,然后调用了uninstall方法。如下: 咋们直接进入1方法去看看 1 和 3 就是所谓生命周期的方法调用,我们进入2看看去, 其实要看的代码只是画圈的那个,我们进1看看,怎么帮我们生成一个影藏节点的,代码如下 之后就把以前的this.node节点直接换成这个创建好的节点。然后回到remove方法中的uninstall方法,就完了。 ps: 了解omi.Component实例的生命周期,当和子组件搭配时,可以很清楚了自己干了啥。
转载于:https://www.cnblogs.com/sorrowx/p/6612262.html
Omi框架学习之旅 - 生命周期 及原理说明相关推荐
- Omi框架学习之旅 - Hello World 及原理说明
学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...
- Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...
- Omi框架学习之旅 - 插件机制之omi-touch 及原理说明
这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方 ...
- Omi框架学习之旅 - 插件机制之omi-finger 及原理说明
以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插 ...
- day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...
- 滴滴Booster移动APP质量优化框架 学习之旅 三
推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 滴滴Booster移动App质量优化框架-学习之旅 二对重复资源 ...
- 滴滴Booster移动APP质量优化框架 学习之旅 二
推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 续写滴滴Booster移动APP质量优化框架学习之旅,上篇文章分 ...
- ET框架的基础逻辑,生命周期和Scene层级树
ET框架的基础逻辑 文章目录 ET框架的基础逻辑 ECS思想和OOP思想的区别 ECS下简易的逻辑的分发 ET框架下实体的生命周期 ET框架的Scene树 ECS思想和OOP思想的区别 以传统RP ...
- 【Spring系列】- Bean生命周期底层原理
Bean生命周期底层原理
最新文章
- 用bind架设自己的智能DNS
- JNI设置C++与java的结合(2)
- Diverse Strings
- Linux学习:文件描述符相关函数
- leetcode之二叉树的层序遍历
- PyTorch入门(一)--PyTorch基础
- 人造肉公司大受追捧!美国公司Beyond Meat在IPO首日暴涨163%
- python uwsgi_python nginx+uwsgi+WSGI 处理请求详解
- 伦茨8400变频器面板按键说明_国产变频器按键的各个功能
- 前端开发——图片标注工具
- python3数学建模基础(三)实现斐波那契数列
- python给pdf右上角盖章
- 模拟信号数字化传输系统的设计与仿真分析说明书
- Aura Components Basics on Trailhead —— Input Data Using Forms
- 微软重申人工智能将增强人类体验而不是取而代之
- 长除法计算平方根的方法总结与代码实现(C++, Python)
- 从零开始快速入门Transformer注意力机制
- java 授权码模式_Spring Security OAuth2 授权码模式的实现
- U3D通过ZXing读取本地二维码
- 三角定位PHP实现,算法 – 三角定位和定位点(x,y,z)
热门文章
- 解决Pycharm:Windows Defender might be impacting your build performance.
- 财讯传媒集团首席战略官段永朝:AI等技术将带来认知重启
- STL 之vector详解
- java 实体属性个数_?Java中比较实用实体转换工具介绍
- python两个list合并成字典_Python将两个list合并为一个字典
- Oracle DML、DDL、DCL的区别
- 数据库的数据在硬盘上吗
- .net core3.0上传文件出现404_使用FTP代理功能连接空间上传文件(解决改善用户上传慢的问题)...
- 苹果核 - Tangram 的基础 —— vlayout(Android)
- 自定义View:测量measure,布局layout,绘制draw