生命周期

?

nameavatarscompany

constructor	構(gòu)造函數(shù)	new的時(shí)候
install	初始化安裝，這可以拿到用戶傳進(jìn)的data進(jìn)行處理	實(shí)例化
installed	安裝完成，HTML已經(jīng)插入頁(yè)面之后執(zhí)行	實(shí)例化
uninstall	卸載組件。執(zhí)行remove方法會(huì)觸發(fā)該事件	銷毀時(shí)
beforeUpdate	更新前	存在期
afterUpdate	更新后	存在期

?

示意圖

?

以上是官網(wǎng)的，看著讓人還是挺明白的。但是我還是喜歡用我的理解解說一把。

生命周期指一個(gè)對(duì)象的生老病死。具體來說是繼承Omi.Component類的子類的實(shí)例的生命周期。

1. 當(dāng)我們 new 子類的時(shí)候， 子類的實(shí)例會(huì)得到Omi.Component類的所以屬性和方法。

2. 當(dāng)我們使用Omi.render方法時(shí)，其實(shí)調(diào)用的是Component類上的_render方法，在這個(gè)方法前后會(huì)分別調(diào)用install和installed方法，就如上圖的左邊部分。

3. 實(shí)例的存在期呢，我們經(jīng)常會(huì)調(diào)用updade方法更新dom節(jié)點(diǎn)，那在這個(gè)update方法之前會(huì)分別調(diào)用beforeUpdate和afterUpdate,就如上圖的右邊部分。

4. 實(shí)例銷毀期，就是就是調(diào)用實(shí)例的remove方法，期間也會(huì)調(diào)用update方法(那么必然會(huì)調(diào)用beforeUpdate,afterUpdate方法),之后呢會(huì)調(diào)用uninstall方法。就如上圖的右下角部分。

?

老規(guī)矩：先上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');的時(shí)候是不是就執(zhí)行了install 和 installed 方法 啊？

答：是的，一般可以在install方法中給實(shí)例設(shè)置數(shù)據(jù)， installed方法中update設(shè)置好的數(shù)據(jù)。怎么實(shí)現(xiàn)的如下：



上圖中的2那個(gè)方法主要用來遍歷實(shí)例是否還有孩子，有的話就遍歷孩子，調(diào)用孩子的installed方法。如果孩子還有孩子就遞歸

_childrenInstalled(root){ // 實(shí)例root.children.forEach((child) => { // 遍歷實(shí)例的每一個(gè)孩子this._childrenInstalled(child); // 遞歸(看看自己的孩子還有沒有孩子children)child.installed(); // 調(diào)用孩子實(shí)例installed方法 });}

3那邊的代碼就執(zhí)行installed方法。

這就是使用omi.render方法時(shí)要走的過程。

?

疑問2：
更新節(jié)點(diǎn)使用update方法，這個(gè)update到底做了什么？

答：
這個(gè)的要細(xì)細(xì)看來了，如下



1 這里調(diào)用了beforeUpdate方法。
2 這里上面有解釋，看代碼，如下：
_childrenBeforeUpdate(root) { // 實(shí)例的孩子render方法前的回調(diào)root.children.forEach((child)=>{child.beforeUpdate(); // 跟新孩子的beforeUpdate方法回調(diào)this._childrenBeforeUpdate(child); // 孩子的孩子 });}

? 3 這里就是重新生成html css 事件轉(zhuǎn)換，但是并不是無(wú)腦innerHTML,而是通過morphdom(this.node, this.HTML);來跟新節(jié)點(diǎn)的，這個(gè)morphdom不是虛擬dom，只是局部跟新dom節(jié)點(diǎn)，感興趣的可以看看他的源碼。

? 4 這里看看代碼

_childrenAfterUpdate(root){root.children.forEach((child)=>{this._childrenAfterUpdate(child); // 孩子的孩子的afterUpdate方法child.afterUpdate(); // 孩子的afterUpdate方法 });}

? 5 那里就是調(diào)用自身的afterUpdate()方法，至此結(jié)束了。

疑問3：
實(shí)例的remove方法幫我們做了啥啊？

答：幫我們update了節(jié)點(diǎn)，只不過把節(jié)點(diǎn)改成了input節(jié)點(diǎn)影藏節(jié)點(diǎn)，然后調(diào)用了uninstall方法。如下：


咋們直接進(jìn)入1方法去看看


1 和 3 就是所謂生命周期的方法調(diào)用，我們進(jìn)入2看看去，


其實(shí)要看的代碼只是畫圈的那個(gè)，我們進(jìn)1看看，怎么幫我們生成一個(gè)影藏節(jié)點(diǎn)的，代碼如下



之后就把以前的this.node節(jié)點(diǎn)直接換成這個(gè)創(chuàng)建好的節(jié)點(diǎn)。然后回到remove方法中的uninstall方法，就完了。


ps:
了解omi.Component實(shí)例的生命周期，當(dāng)和子組件搭配時(shí)，可以很清楚了自己干了啥。

轉(zhuǎn)載于:https://www.cnblogs.com/sorrowx/p/6612262.html

總結(jié)

以上是生活随笔為你收集整理的Omi框架学习之旅 - 生命周期 及原理说明的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。