유령 : 웹 구성 요소의 고리

Dave는 최근 기본 웹 구성 요소에 반응 형 고리 기능을 제공하는 매혹적인 라이브러리 인 Haunted를 소개했습니다. 이는 웹 구성 요소 개발 경험, 특히 기본 기능 우선 순위를 정하고 빌드 프로세스를 피하는 프로젝트에 대한 매력을 크게 향상시킵니다.

웹 구성 요소는 문제가 있지만 번거로운 템플릿 및 상태 관리와 같은 일반적인 억제 요소는 현대적인 도구로 쉽게 해결됩니다.

간단한 생성<my-app></my-app> 구성 요소는 간단합니다.

 "https://unpkg.com/lit-html/lit-html.js"에서 {html} 가져 오기;
"https://unpkg.com/haunted/haunted.js"에서 {component} 가져 오기;

기능 앱 () {
  html`를 반환하십시오
    <div>
      안녕하세요, 세상!
    </div>
  `;;
}

customElements.define ( "my-app", component (app));

유령의 후크를 사용하여 상태를 추가하는 것은 간단합니다.

 "https://unpkg.com/lit-html/lit-html.js"에서 {html} 가져 오기;
"https://unpkg.com/haunted/haunted.js"에서 {component, usestate} import;

기능 앱 () {
  const [name, setname] = usestate ( "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"에서 {구성 요소, usestate, useeffect} import;

기능 앱 () {
  const [planets, setplanets] = usestate ([]);
  useeffect (() => {
    fetch ( 'https://spapi.co/api/planets/?page=2')
      .Then (응답 => response.json ())
      . 그런데 (data => {
        let 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));

이를 통해 Haunted의 기능을 활용하는 완벽하고 간결한 웹 구성 요소가 전시됩니다.

위 내용은 유령 : 웹 구성 요소의 고리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!