Lightning component的生命週期
學習目的
1，瞭解component的生命週期
2，瞭解component的初始化
Component的生命週期包含三個時期：instantiated，rendered，re-rendered。
re-rendered只有在程序編譯加載或者頁面展示數據值發生改變的時候纔會被使用。例如當瀏覽器事件觸發了一個更新數據的操作。如果先前的請求沒有被緩存，那麼component的生命週期是以一個發送到salesforce服務器的http請求進行component配置開始的。首先會創建一個包含當前component的所有父級的定義，然後再創建這些component的畫面。這種模式也能在服務器上創建任何與component相關的定義。包括attribute，interface，controller，action。當框架的render服務插入了DOM元素的時候，而你又想和這些DOM元素進行交互，那麼renderer是十分有用的。你不能在init事件裏面去自定義render行爲，但是你可以在客戶端去自定義renderer。
在Lightning組件框架中修改DOM元素
Lightning框架通過一個component去創建和管理DOM element。如果你想去修改這些框架生成的DOM元素，那麼需要在component的渲染器或者自定義渲染器中去處理。此外，當component re-rendered的時候，框架會重載那些做過的修改。
以下是渲染和重新渲染週期的四個階段的基本實現：
以下是渲染週期：
1， Init event – 在component構造之後，在渲染之前，更新一個component或者觸發一個事件
2， render() – 渲染這個component的主體
3， afterRender() – 在component主體被插入後，能夠讓框架和你能夠交互，
4， render event – 這個交給框架去處理會比自定義render()和重載afterRender()好很多。
在reRender()時期，當基於數據的事件發生改變的時候，框架去調用每一個組件下面的reRender方法。在完成調用後，render event事件就會再次被觸發。
使用lightning component有以下兩種方式去是DOM工作。
1， 開箱即用的render事件
2， 自定義Renderer
Out of the box render event(開箱即用的render事件)
當組件被渲染過或則多次渲染過，aura:valueRender事件，也被大家叫做渲染事件，就被觸發。處理此事件是爲了後期處理DOM或對組件渲染或重新渲染作出反應。與創建自定義渲染器的替代方法相比，該事件更受歡迎且更易於使用。
<aura:handler name=“render” value="{!this}" action="{!c.onRender}"/>
Custom renderer（自定義渲染器）
只有在以下情況纔要去自定義渲染器：
1， 框架的渲染服務插入DOM元素後，使用DOM樹。
2， 自定義標記或init事件無法實現的渲染行爲。渲染器文件是組件包的一部分，如果您遵循命名約定Renderer.js，則會自動連接。例如，sample.cmp的渲染器將在sampleRenderer.js中。
3， // c1.cmp
4， aura:component
5， <aura:attribute name=“msg” type=“String” />
6， <aura:attribute name=“text” type=“String” />
7， <aura:attribute name=“show” type=“boolean” default=“true”/>
8，
9，
10， <aura:if isTrue="{!v.show}">
11， <c:c2 />
12， <aura:set attribute=“else”>
13， Component is not rendered!!!
14， </aura:set>
15， </aura:if>
16， <ui:button aura:id=“button” label=“re-Render” press="{!c.update}"/>
17， </aura:component>
18，
19， // c1Controller.js
20， ({
21， update : function(component, event, helper) {
22， alert(‘button clicked’);
23， component.set(“v.text”,“Changed value after Rerender”);
24， component.set(“v.show”,“false”);
25， }
26， })
27，
28， //c1Renderer.js
29， ({
30， render: function(cmp, helper) {
31， console.log(‘render’);
32， helper.changeValueRender(cmp);
33， return this.superRender()
34， },
35， rerender: function(cmp, helper) {
36， console.log(‘rerender’);
37， return this.superRerender()
38， },
39， })
40，
41， //C2.cmp
42， <aura:component >
43， I am alive!
44， </aura:component>
45，
46， //c2Renderer.js
47， ({
48， unrender : function (cmp, helper) {
49， console.log('Component 2 unrender ');
50， return this.superUnrender();
51， },
52， })
53，
54， // Render.app
55， <aura:application >
56， <c:c1 />
57， </aura:application>
1,渲染和渲染後只在生命週期中調用一次。
2,在afterRender中執行DML而不是渲染功能。
3,僅在需要大量修改DOM時才使用這些功能。
4,對於第三方庫，使用un-render可以使應用程序更快更智能。
5,嘗試使用框架提供的render（）事件作爲最佳實踐。
Component的初始化順序
創建組件實例後，序列化組件定義和實例將向下發送到客戶端。定義是高速緩存但不是實例數據。客戶端反序列化響應以創建JavaScript對象或映射，從而生成用於渲染組件實例的實例樹。當組件樹準備就緒時，將從子組件開始並在父組件中完成爲所有組件觸發init事件。