深入學習Flex元件生命週期

2021-05-23 23:14:08 字數 2560 閱讀 6925

1、生命週期(lifecycle)簡述

⑴呼叫flex元件建構函式。建構函式沒有返回型別,沒有引數,使用super()呼叫父類的構造器

⑵使用set,get設定flex元件屬性,常在set方法內監控乙個布林變數來實現失效機制

⑶呼叫addchild()方法將flex元件新增到父flex元件顯示列表中,flex將自動呼叫 createchildren(),invalidateproperties(),invalidatesize(),invalidatedisplaylist()。 只有將flex元件新增到父容器中,flex才能確定它的大小(size),設定它所繼承 樣式(style)屬性,或者在螢幕上畫出它

⑷flex元件的parent屬性設定為對父容器的引用

⑸樣式(style)設定

⑹flex元件分發preinitialize事件

⑺呼叫flex元件createchildren()方法

⑻呼叫invalidateproperties(),invalidatesize(),invalidatedisplaylist()失效方 法,flex將在下乙個「渲染事件」(renderevent)期間對相應的commitproperties(),measure(),update displaylist()方法進行呼叫。這個規則唯一例外就是當使用者設定flex元件的height和width屬性時,flex不會呼叫measure()方法。也就是說,只有當flex元件的exp licitwidth和explicitheight屬性是nan時flex才會呼叫measure()方法。

⑼flex元件分發initialize事件。此時flex元件所有的子flex元件初始化完成,但flex元件尚未更改size和布局,可以利用這個事件在flex元件布局之前執行一些附加的處理

⑽在父容器上分發childadd事件

⑾在父容器上分發initialize事件

a.呼叫flex元件的commitproperties()方法

b.呼叫flex元件的measure()方法

c.呼叫flex元件的layoutchrome()方法

d.呼叫flex元件的updatedisplaylist()方法

e.在flex元件上分發updatecomplete事件

⒀如果commitproperties(),measure(),updatedisplaylist()方法呼叫了 invalidateproperties(),invalidatesize(),invalidatedisplaylist()方法,則flexh 會分發另外乙個render事件

⒁在最後的render事件發生後,flex執行以下動作:

a.設定flex元件visible屬性使其可視

b.flex元件分發creationcomplete事件,flex元件的大小(size)和布局被確定,這個事件只在flex元件建立時分發一次

c.flex元件分發updatecomplete事件。無論什麼時候,只要flex元件的布局(layout),位置,大小或其它可視的屬性發生變化就會分發這事件,然後更新flex元件來正確地顯示。

2、為什麼使用失效機制(invalidationmechanism)

一種情況是,當設定了flex元件的多個屬性後,比如button控制項 的label和icon屬性,我們需要所有屬性被設定後一次性執行commitproperties(),measure(),updatedisplaylist()方法,而不是設定過label屬性後執行一遍這些方法,然後在設定icon屬性後又執行一次這些方法。

另一種情況是幾個flex元件同時更改了它們的字型大小。程式更改字型大小的執行速度大大快於flex更新應用的速度,因此要在確定最終更改字型之 後才開始更新布局。另外,flex需要協調布局操作以消除任何冗餘過程,而不是在每個flex元件更新它的字型大小之後都執行一次布局操作。

flex使用「失效機制(invalidationmechanism)」來同步 flex 元件的更改。flex用一系列方法的呼叫,比如在setter方法內監控乙個變更變數來標記flex元件的某些東西已經發生變化,然後在下乙個「渲染事件 (renderevent)」中觸發flex元件的 commitproperties(),measure(),layoutchrome(),updatedisplaylist()檢查這些布林變數來 完成最終的變更邏輯。這樣做的額外好處就是setter方法可以更迅速地返回,把對新屬性值的處理留給了commitproperties()方法。

失效方法及其對應的觸發函式如下:

invalidateproperties()通知flex元件,以使下次螢幕更新時,它的commitproperties()方法被呼叫。

invalidatesize()通知flex元件,以使下次螢幕更新時,它的measure()方法被呼叫。

invalidatedisplaylist()通知flex元件,以使下次螢幕更新時它的layoutchrome()方法和

updatedisplaylist()方法能被呼叫。

當flex元件呼叫乙個「失效」方法時,它就通知flex該flex元件已經被更新。當多個flex元件呼叫失效

方法,flex會在schedules中協調這些更新,以使這些更新操作在下一次螢幕更新時一起執行。注意,createchildren()沒有對應的失效方法,它會在呼叫後被立即執行。

深入FLEX元件生命週期

生命週期 lifecycle 簡述 呼叫元件建構函式。建構函式沒有返回型別,沒有引數,使用super 呼叫父類的構造器 使用set,get 設定元件屬性,常在set 方法內監控乙個布林變數來實現失效機制 呼叫addchild 方法將元件新增到父元件顯示列表中,flex 將自動呼叫createchil...

元件生命週期

三大階段 失效階段,提交階段,度量階段 失效階段 對元件屬性setter函式中,若有發生改變,則標記屬性失效,為了防止多次呼叫setter而導致頻繁更改屬性,所以呼叫屬性失效函式,當當前ui存放進 layoutmannger的失效佇列中,並新增layoutmannger的延遲偵聽,在下一幀才進行相應...

元件生命週期

元件生命週期指的是元件從建立到銷毀的過程,在這個過程中的一些不同的階段,vue會呼叫指定的一些元件方法 基本生命週期函式有下面幾個階段 每乙個階段都對應著 之前 和 之後 兩個函式 beforecreate 初始化階段,應用不多 created 在例項建立完成後被立即呼叫,該階段完成了對data中的...