鬧鬼：Web組件的掛鉤

戴夫（Dave）最近向我介紹了Haunted，這是一個引人入勝的圖書館，為本機Web組件提供類似反應的鉤子功能。這大大增強了Web組件開發的經驗，特別是它呼籲項目優先級的本地功能和避免構建流程的項目。

儘管Web組件面臨著挑戰，但使用現代工具可以輕鬆解決繁瑣的模板和州管理等常見威懾。

創建一個簡單的<my-app></my-app>組件很簡單：

導入{html}來自“ https://unpkg.com/lit-html/lit-html.js”;
導入{component}來自“ https://unpkg.com/haunted/haunted.js”;

功能應用程序（）{
  返回html`
    <div>
      你好世界！
    </div>
  `;
}

customElements.define（“ my-app”，component（app））;

使用Haunted的鉤子添加狀態同樣簡單：

導入{html}來自“ https://unpkg.com/lit-html/lit-html.js”;
導入{component，usestate}來自“ https://unpkg.com/haunted/haunted.js”;

功能應用程序（）{
  const [name，setName] = usestate（“ chris”）;
  返回html`
    <div>
      你好，$ {name}！
    </div>
  `;
}

customElements.define（“ my-app”，component（app））;

本週的Codepen挑戰利用了《星球大戰》 API。讓我們演示以useEffect來獲取數據並更新狀態：

導入{html}來自“ https://unpkg.com/lit-html/lit-html.js”;
導入{component，usestate，useeffect}來自“ https://unpkg.com/haunted/haunted.js”;

功能應用程序（）{
  const [行星，setplanets] = usestate（[]）;
  useeffect（（）=> {
    fetch（'https://swapi.co/api/planets/?page=2'）
      。
      。然後（data => {
        令Planets = data.Results.filter（Planet => Planet.diameter！==“ 0”）;
        SetPlanets（行星）;
      }）;
  }，[]）;

  返回html`
    <div>
      $ {Planets.map（Planet => html`
        <div style="--dia: ${planet.diameter}px">
          $ {planet.name}
        </div>
      `）}}
    </div>
  `;
}

customElements.define（“ my-app”，component（app））;

這展示了一個功能齊全，簡潔的Web組件，利用了Haunted的功能。

以上是鬧鬼：Web組件的掛鉤的詳細內容。更多資訊請關注PHP中文網其他相關文章！