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

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

lwc-recipes サンプルリポジトリ内の libsChartjs モジュールでは、renderedCallback() ライフサイクルフックが使用されます。

関連トピック