闹鬼：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中文网其他相关文章！