Lightning コンポーネント開発者ガイド
j表示ライフサイクル中に起動されたイベント
コンポーネントの作成
コンポーネントのライフサイクルは、クライアントが HTTP 要求をサーバに送信し、コンポーネント設定データがクライアントに返されると開始します。以前の要求によってコンポーネント定義がすでにクライアント側にあり、コンポーネントにサーバとの連動関係がない場合は、このサーバとの往復のやりとりは行われません。
ネストされたいくつかのコンポーネントを含むアプリケーションを見てみましょう。フレームワークは、アプリケーションをインスタンス化し、v.body facet の子を通って、各コンポーネントを作成します。まず、コンポーネント定義とその親階層全体を作成してから、コンポーネント内で facet を作成します。また、属性、インターフェース、コントローラ、アクションの定義を含め、すべてのコンポーネントの連動関係もサーバに作成します。
コンポーネントインスタンスが作成されると、逐次化されたコンポーネント定義とインスタンスがクライアントに送信されます。定義はキャッシュされますが、インスタンスデータはキャッシュされません。クライアントは、応答の逐次化を解除して JavaScript オブジェクトまたは対応付けを作成します。その結果、コンポーネントインスタンスの表示に使用するインスタンスツリーが作成されます。コンポーネントツリーの準備が整うと、すべてのコンポーネントに対して init イベントが起動されます。起動は、子コンポーネントから開始し、親コンポーネントで終了します。
コンポーネントの表示
-
init イベントは、コンポーネントを構成するコンポーネントサービスによって起動され、初期化が完了したこと通知します。
コンポーネントの表示が開始される前に、init ハンドラをカスタマイズして、独自のコントローラロジックを追加できます。詳細は、「コンポーネントの初期化時のアクションの呼び出し」 を参照してください。
1<aura:handler name="init" value="{!this}" action="{!.c.doInit}"/> - ツリーのコンポーネントごとに、render() の基本実装またはカスタムレンダラがコールされ、コンポーネントの表示が開始されます。詳細は、「DOM へのクライアント側表示」 を参照してください。コンポーネントの作成プロセスと同様に、表示はルートコンポーネントで開始され、子コンポーネントとスーパーコンポーネントの順に処理され (存在する場合)、子サブコンポーネントで終了します。
- コンポーネントが DOM に表示されると、afterRender() がコールされ、これらの各コンポーネント定義について表示が完了したことが通知されます。これにより、フレームワークの表示サービスで DOM 要素が作成されたら、DOM ツリーを操作できます。
- クライアントがサーバ要求 XHR への応答の待機を終了したことを示すために、doneWaiting イベントが起動されます。このイベントは、クライアント側コントローラアクションに結び付けられたハンドラを追加することで処理できます。
- フレームワークは、再表示が必要なコンポーネントがあるかどうか確認し、属性値の更新を反映する場合など、「汚れた」(更新が必要な) コンポーネントがあれば再表示します。この再表示確認��、汚れたコンポーネントや値が存在しない場合でも行われます。
- 最後に、doneRendering イベントが表示ライフサイクルの終了時に起動されます。
1<!-- The uiExamples:buttonExample container component -->
2<aura:component>
3 <aura:attribute name="num" type="Integer" default="0"/>
4 <ui:button aura:id="button" label="{!v.num}" press="{!c.update}"/>
5</aura:component>1/** Client-side Controller **/
2({
3 update : function(cmp, evt) {
4 cmp.set("v.num", cmp.get("v.num")+1);
5 }
6})| コンポーネント | 説明 |
|---|---|
| uiExamples:buttonExample | ui:button コンポーネントが含まれる最上位コンポーネント |
| ui:button | 最上位コンポーネントに含まれる ui:button コンポーネント |
| aura:html | <button> タグを表示します。 |
| aura:if | ui:button の最初の aura:if タグ。ボタンには画像が含まれていないため、何も表示されません。 |
| aura:if | ui:button の 2 つ目の aura:if タグ |
| aura:html | <button> タグにネストされた、ボタンの表示ラベル用の <span> タグ |
| aura:expression | v.num 式 |
| aura:expression | 空の v.body 式 |
マークアップの HTML タグは、生成される HTML タグを定義する tag 属性が含まれた aura:html に変換されます。この例では、表示が完了すると、これらのコンポーネント定義について afterRender() が 8 回コールされます。doneWaiting イベントが起動され、その後に doneRendering イベントが起動されます。
ボタンをクリックするとその表示ラベルが更新され、更新が必要なコンポーネントがチェックされます。rerender() が起動されて、それらのコンポーネントが再表示され、その後に doneRendering イベントが起動されます。この例では、rerender() が 8 回コールされます。変更された値はすべて表示サービスのリストに保存され、更新が必要なコンポーネントがあれば再表示されます。
ネストされたコンポーネントの表示
myApp.app というアプリケーションに myCmp.cmp コンポーネントが含まれ、そのコンポーネントに ui:button コンポーネントが含まれるとします。
初期化中、init() イベントは、ui:button、ui:myCmp、myApp.app の順序で起動されます。doneWaiting イベントが同じ順序で起動されます。最後に、doneRendering イベントも同じ順序で起動されます。