生命周期

?

nameavatarscompany

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

?

示意圖

?

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

生命周期指一個對象的生老病死。具體來說是繼承Omi.Component類的子類的實例的生命周期。

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

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

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

4. 實例銷毀期，就是就是調(diào)用實例的remove方法，期間也會調(diào)用update方法(那么必然會調(diào)用beforeUpdate,afterUpdate方法),之后呢會調(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');的時候是不是就執(zhí)行了install 和 installed 方法 啊？

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



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

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

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

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

?

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

答：
這個的要細細看來了，如下



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

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

? 4 這里看看代碼

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

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

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

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


咋們直接進入1方法去看看


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


其實要看的代碼只是畫圈的那個，我們進1看看，怎么幫我們生成一個影藏節(jié)點的，代碼如下



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


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

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

總結(jié)

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

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