Haunted：Webコンポーネント用のフック

デイブは最近、ネイティブのWebコンポーネントに反応のようなフック機能を提供する魅力的なライブラリであるHauntedを紹介しました。これにより、Webコンポーネントの開発エクスペリエンス、特にネイティブの機能を優先し、ビルドプロセスを回避するプロジェクトに対する魅力が大幅に向上します。

Webコンポーネントには課題がありますが、面倒なテンプレートや国家管理などの一般的な抑止力は、最新のツールで簡単に対処できます。

シンプルを作成します<my-app></my-app>コンポーネントは簡単です：

 "https://unpkg.com/lit-html/lit-html.js"から{html}をインポート} ";
"https://unpkg.com/haunted/haunted.js"から{component}をインポート}からインポートします。

function app（）{
  html`を返します
    <div>
      こんにちは世界！
    </div>
  `;
}

customelements.define（ "my-app"、component（app））;

Hauntedのフックを使用して状態を追加することも同様に簡単です：

 "https://unpkg.com/lit-html/lit-html.js"から{html}をインポート} ";
"https://unpkg.com/haunted/haunted.js"から{component、uesestate}をimport {component、usestate}からintemint

function app（）{
  const [name、setname] = uesestate（ "chris"）;
  html`を返します
    <div>
      こんにちは、$ {name}！
    </div>
  `;
}

customelements.define（ "my-app"、component（app））;

今週のCodepen Challengeは、Star Wars APIを利用しています。データの取得と、 useEffectて状態を更新することを示しましょう。

 "https://unpkg.com/lit-html/lit-html.js"から{html}をインポート} ";
"https://unpkg.com/haunted/haunted.js"から{component、usestate、useefcect}をimport

function app（）{
  const [planets、setplanets] = uesestate（[]）;
  effect（（）=> {
    fetch（ 'https://swapi.co/api/planets/?page=2'）
      .then（response => respons.json（））
      .then（data => {
        planets = data.results.filter（planet => planet.diameter！== "0"）;
        セットプラネット（惑星）;
      }）;
  }、[]）;

  html`を返します
    <div>
      $ {planets.map（planet => html`
        <div style="--dia: ${planet.diameter}px">
          $ {planet.name}
        </div>
      `）}
    </div>
  `;
}

customelements.define（ "my-app"、component（app））;

これは、Hauntedの機能を活用する完全に機能的で簡潔なWebコンポーネントを紹介します。

以上がHaunted：Webコンポーネント用のフックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。