Lightning コンポーネント開発者ガイド
j<aura:if> — 表示されない内容のクリーンアップ
この警告は、<aura:if> タグの isTrue 属性を true から false に変更した場合に発生します。<aura:if> の表示されない内容は破棄する必要があり、これによりフレームワークで表示にかかる時間が短縮されます。
例
次のコンポーネントは、アンチパターンを示しています。
1<!--c:ifCleanUnrendered-->
2<aura:component>
3 <aura:attribute name="isVisible" type="boolean" default="true"/>
4 <aura:handler name="init" value="{!this}" action="{!c.init}"/>
5
6 <aura:if isTrue="{!v.isVisible}">
7 <p>I am visible</p>
8 </aura:if>
9</aura:component>コンポーネントのクライアント側コントローラを次に示します。
1/* c:ifCleanUnrenderedController.js */
2({
3 init: function(cmp) {
4 /* Some logic */
5 cmp.set("v.isVisible", false); // Performance warning trigger
6 }
7})コンポーネントが作成されるときに、<aura:if> タグの isTrue 属性が評価されます。isVisible 属性の値はデフォルトで true なので、フレームワークによって <aura:if> タグのボディが作成されます。コンポーネントが作成されてから表示されるまでの間に、init イベントがトリガされます。
クライアント側コントローラの init() 関数で isVisible の値が trueから false に切り替えられます。<aura:if> タグの isTrue 属性が false になったので、フレームワークは <aura:if> タグのボディを破棄する必要があります。この警告は、デバッグモードを有効にした場合にのみブラウザコンソールに表示されます。
1WARNING: [Performance degradation] markup://aura:if ["5:0"] in c:ifCleanUnrendered ["3:0"]
2needed to clear unrendered body.警告のスタック追跡を表示するには、警告の横の展開ボタンをクリックします。
ブラウザコンソールの [ソース] ペインに問題を起こしているコードの行を表示するには、スタック追跡で ifCleanUnrendered エントリのリンクをクリックします。
警告を修正する方法
isTrue 式のロジックを逆にします。isTrue 属性をデフォルトで true に設定せずに、false に設定します。必要に応じて、init() メソッドで isTrue 式を true に設定します。
次に、修正したコンポーネントを示します。
1<!--c:ifCleanUnrenderedFixed-->
2<aura:component>
3 <!-- FIX: Change default to false.
4 Update isTrue expression in controller instead. -->
5 <aura:attribute name="isVisible" type="boolean" default="false"/>
6 <aura:handler name="init" value="{!this}" action="{!c.init}"/>
7
8 <aura:if isTrue="{!v.isVisible}">
9 <p>I am visible</p>
10 </aura:if>
11</aura:component>次に、修正したコントローラを示します。
1/* c:ifCleanUnrenderedFixedController.js */
2({
3 init: function(cmp) {
4 // Some logic
5 // FIX: set isVisible to true if logic criteria met
6 cmp.set("v.isVisible", true);
7 }
8})