Haunted: Haken für Webkomponenten

Dave hat mich kürzlich Haunted vorgestellt, eine faszinierende Bibliothek, die React-ähnliche Hooks-Funktionen für native Webkomponenten bietet. Dies verbessert die Entwicklung der Webkomponenten erheblich, insbesondere die Attraktivität für Projekte, die native Funktionen priorisieren und auf Bauprozesse vermieden werden.

Während Webkomponenten ihre Herausforderungen haben, können gemeinsame Abschreckungsmittel wie umständliche Vorlagen und staatliches Management leicht mit modernen Tools angesprochen werden.

Ein einfaches Erstellen<my-app></my-app> Die Komponente ist unkompliziert:

 importieren {html} aus "https://unpkg.com/lit-html/lit-html.js";
import {component} aus "https://unpkg.com/haunted/haunted.js";

Funktion App () {
  kehren Sie html` zurück
    <div>
      Hallo Welt!
    </div>
  `;
}

CustomElements.define ("my-App", Komponente (App));

Das Hinzufügen von Status mit den Hooks von Haunted ist ebenso einfach:

 importieren {html} aus "https://unpkg.com/lit-html/lit-html.js";
importieren {component, usestate} aus "https://unpkg.com/haunted/haunted.js";

Funktion App () {
  const [name, setName] = usestate ("chris");
  kehren Sie html` zurück
    <div>
      Hallo, $ {Name}!
    </div>
  `;
}

CustomElements.define ("my-App", Komponente (App));

Die Codepen Challenge dieser Woche nutzt die Star Wars -API. Lassen Sie uns das Abrufen von Daten und Aktualisierungsstatus mit useEffect zeigen:

 importieren {html} aus "https://unpkg.com/lit-html/lit-html.js";
importieren {component, usestate, useEffect} aus "https://unpkg.com/haunted/haunted.js";

Funktion App () {
  const [Planeten, setPlanets] = usustate ([]);
  useEffect (() => {
    Fetch ('https://swapi.co/api/Planets/?page=2')
      .then (response => response.json ())
      .then (data => {
        let planets = data.results.Filter (Planet => Planet.Diameter! == "0");
        setPlanets (Planeten);
      });
  }, []);

  kehren Sie html` zurück
    <div>
      $ {planets.map (Planet => html`
        <div style="--dia: ${planet.diameter}px">
          $ {Planet.Name}
        </div>
      `)}
    </div>
  `;
}

CustomElements.define ("my-App", Komponente (App));

Dies zeigt eine voll funktionsfähige, prägnante Webkomponente, die die Funktionen von Haunted nutzt.

Das obige ist der detaillierte Inhalt vonHaunted: Haken für Webkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!