コンポーネント表示時のコードの実行

renderedCallback() は、Lightning Web Components 独自のフックです。コンポーネントの表示フェーズが完了したら、これを使用してロジックを実行します。

このフックは、子から親の順序で起動します。

コンポーネントが表示されるときは、テンプレートで使用されている式が再評価されます。

コンポーネントを接続して表示された後、コンポーネントの状態に変化 (または変異) が発生すると、コンポーネントはダーティとしてマークされ、コンポーネントを再表示するマイクロタスクがキューに追加されます。追跡される変更についての詳細は、「リアクティビティ」を参照してください。

通常、アプリケーションの有効期限の間、コンポーネントは何度も表示されます。このフックを使用して 1 回限りの操作を実行するには、hasRendered などの Boolean フィールドを使用して、renderedCallback() が実行されたかどうかを追跡します。renderedCallback() が初めて実行されたときに、1 回限りの操作を実行して hasRendered = true を設定します。hasRendered = true が設定されている場合は、操作を実行しないでください。

HTML テンプレートでイベントリスナーを宣言的に追加するのが最良の方法です。ただし、プログラムでイベントリスナーをテンプレート要素に追加する必要がない場合は、renderedCallback() でこれを行います。リスナーを削除する必要はありません。リスナーが同じ要素に繰り返し追加されると、ブラウザで重複が無視されます。

テンプレートが再表示される場合、LWC エンジンは既存の要素を再利用しようとします。次のケースでは、エンジンは diffing アルゴリズムを使用して、要素を削除するかどうかを決定します。

• for:each ディレクティブを使用して作成された要素。これらの反復要素を再利用するかどうかは、key 属性によって決まります。key が変更されると、要素は再表示される可能性があります。key が変更されないと、エンジンは反復要素が変更されなかったと想定するため、要素は再表示されません。
• slot コンテンツとして受け取られた要素。エンジンは <slot> の要素を再利用しようとしますが、要素を削除して再作成するかどうかは diffing アルゴリズムによって決まります。

renderedCallback() 内のコンポーネント状態を更新すると、無限ループが発生する可能性があります。次に例を示します。

• renderedCallback() 内のワイヤアダプタ設定オブジェクトプロパティを更新しないでください。「ワイヤサービスについて」を参照してください。
• renderedCallback() 内の公開プロパティまたはフィールドを更新しないでください。「リアクティビティ」を参照してください。

関連トピック

• ライフサイクルフロー
• ワイヤサービスについて