構成の概要
構成は、複雑さを管理し、コードを再利用可能な部分に整理するための戦略です。 Lit は構成とコードの再利用のためのいくつかのオプションを提供します。
- コンポーネントの構成。
- リアクティブコントローラー。
- クラスミックスイン。
コンポーネントの構成は、より単純なコンポーネントから複雑なコンポーネントを組み立てるプロセスです。コンポーネントは、そのテンプレート内でサブコンポーネントを使用できます。コンポーネントは、サブコンポーネントにプロパティを設定したり、サブコンポーネントからのイベントをリッスンしたりすることで、標準のDOMメカニズムを使用して通信できます。
コンポーネントの構成は、複雑な Lit プロジェクトをより小さな単位に分割することを考える際のデフォルトの方法ですが、Lit コードをファクタリングするのに役立つ、他に2つの注目すべきコードパターンがあります。
リアクティブコントローラーは、Lit コンポーネントの更新ライフサイクルにフックできるオブジェクトであり、ある機能に関連する状態と動作を別のコードユニットにカプセル化します。
クラスミックスインを使用すると、再利用可能な部分的なコンポーネント定義を作成し、それらをコンポーネントの継承チェーンに「ミックスイン」できます。
ミックスインとリアクティブコントローラーの両方を使用すると、特定の機能に関連するコンポーネントロジックを再利用可能なユニットにファクタリングできます。 コントローラーとミックスインの比較については、次のセクションを参照してください。
コントローラーとミックスイン
「コントローラーとミックスイン」へのパーマリンクコントローラーとクラスミックスインは、いくつかの点で非常に似ています。どちらもホストコンポーネントのライフサイクルにフックし、状態を維持し、ホストの更新をトリガーできます。
コントローラーとミックスインの主な違いは、コンポーネントとの関係です。コンポーネントはコントローラーを所有しているため、リアクティブコントローラーとは「has-a」の関係にあります。コンポーネントは、ミックスインクラスのインスタンスであるため、ミックスインとは「is-a」の関係にあります。
リアクティブコントローラーは、コンポーネントが所有する別のオブジェクトです。コントローラーは、コンポーネントのメソッドとフィールドにアクセスでき、コンポーネントはコントローラーのメソッドとフィールドにアクセスできます。ただし、コンポーネントがパブリックAPIを公開しない限り、コントローラーはコンポーネントを使用する人によって（簡単には）アクセスできません。コントローラーのライフサイクルメソッドは、コンポーネントの対応するライフサイクルメソッドの前に呼び出されます。
一方、ミックスインは、コンポーネントのプロトタイプチェーンの一部になります。ミックスインによって定義されたパブリックフィールドまたはメソッドは、コンポーネントのAPIの一部です。また、ミックスインはプロトタイプチェーンの一部であるため、コンポーネントはミックスインのライフサイクルコールバックがいつ呼び出されるかをある程度制御できます。
一般的に、機能をコントローラーとしてパッケージ化するか、ミックスインとしてパッケージ化するかを決定しようとする場合は、その機能が次のいずれかを必要としない限り、コントローラーを選択する必要があります。
- コンポーネントにパブリックAPIを追加する。
- コンポーネントのライフサイクルへの非常に詳細なアクセス。