En Guide til Tilpassede Elementer for å Reagere Utviklere

0
9

Jeg hadde for å bygge en UI nylig, og (for første gang på en lang stund) jeg ikke har muligheten til å bruke React.js som er min foretrukne løsning for UI i disse dager. Så, jeg så på hva den innebygde nettleseren Api hadde å tilby, og så at du bruker tilpassede elementer (aka Web Components) kan bare være den rette for at dette Reagerer utvikler nødvendig.

Tilpassede elementer kan tilby de samme generelle fordeler av Reagere komponenter uten å være bundet til et bestemt rammeverk for implementering. Et tilpasset element gir oss en ny HTML-kode som vi kan programmatisk kontroll gjennom en intern nettleser API.

La oss snakke om fordelene med komponent-basert UI:

  • Innkapsling – bekymringer omfattet til at komponenten forbli i denne komponenten er gjennomføring
  • Reusability – når GRENSESNITTET er delt inn i mer generell stykker, de er enklere å bryte seg inn i mønstre som du er mer sannsynlig å gjenta
  • Isolasjon – fordi komponentene er designet for å være innkapslet og med det, får du fordelen av isolasjon, som gjør at du omfang av feil og endringer til en bestemt del av søknaden din enklere

Bruk tilfeller

Du kanskje lurer på hvem som er bruker tilpassede elementer i produksjonen. Spesielt:

  • GitHub er ved hjelp av tilpassede elementer for deres sperrende dialogbokser, autofullfør og vise tid.
  • YouTube ‘ s nye web app er bygget med Polymer-og web-komponenter.

Likheter til den Komponenten API

Når du prøver å sammenligne Reagere Komponenter versus tilpassede elementer, jeg fant Api-er veldig lik:

  • De er begge klasser som ikke er “nye” og er i stand til å utvide en base klasse
  • Både de arver en montering eller gjengivelse lifecycle
  • De begge ta statisk eller dynamisk input via rekvisitter eller attributter

Demo

Så, la oss bygge et lite program som viser detaljer om en GitHub depotet.

Hvis jeg var i ferd med å nærme seg dette med å Reagere, jeg vil definere en enkelt komponent som dette:

<Depotet name=”charliewilco/obsidian” />

Denne komponenten tar et enkelt prop — navnet på depotet, og vi implementerer det som dette:

klasse Depotet strekker seg til å Reagere.Komponent {
tilstand = {
repo: null
};

asynkron getDetails(navn)) {
tilbake venter hente(`https://api.github.com/repos/${name}, {
modus: ‘corso buenos’
}).deretter(res => res.json());
}

asynkron componentDidMount() {
const { name } = dette.rekvisitter;
const repo = venter på dette.getDetails(navn);
dette.setState({ repo });
}

render() {
const { repo } = dette.staten;

if (!repo) {
retur <h1>Mates</h1>;
}

hvis (repo.melding) {
retur <div className=”Kort–feil”>Feil: {repo.melding}</div>;
}

retur (
<div class=”Kort”>
<aside>
<img
bredde=”48″
høyde=”48″
class=”Avatar”
src={repo.eieren.avatar_url}
alt=”Profil bilde for ${repo.eieren.logg}”
/>
</side>
<header>
<h2 class=”Kortet__title”>{repo.full_name}</h2>
<span class=”Kortet__meta”>{repo.beskrivelse}</span>
</header>
</div>
);
}
}

Se Penn Reagere Demo – GitHub av Charles (@charliewilco) på CodePen.

For å bryte dette ned ytterligere, har vi en komponent som har sin egen stat, som er repo detaljer. I utgangspunktet, setter vi den til å være null fordi vi ikke ha noe av at data ennå, så vi får legge indikator når dataene er hentet.

Under Reagere livssyklus, vil vi bruke hent for å hente data fra GitHub, satt opp kortet, og ta en re-gjengi med setState() etter at vi har få data tilbake. Alle disse forskjellige stater UI tar er representert i render () – metoden.

Definere / Bruke et Tilpasset Element

Gjør dette med tilpassede elementer er litt annerledes. Som Reagerer komponent, vår tilpasset element vil ta et enkelt attributt — igjen, navnet på depotet og styre sin egen stat.

Våre element vil se ut som dette:

<github-repo name=”charliewilco/obsidian”></github-repo>
<github-repo name=”charliewilco/nivå.css”></github-repo>
<github-repo name=”charliewilco/reagere-grener”></github-repo>
<github-repo name=”charliewilco/reagere-gluejar”></github-repo>
<github-repo name=”charliewilco/dotfiles”></github-repo>

Se Penn Tilpassede Elementer Demo – GitHub av Charles (@charliewilco) på CodePen.

For å starte, alt vi trenger å gjøre for å definere og registrere deg for en tilpasset element er å lage en klasse som utvider HTMLElement klasse, og deretter registrere navnet på elementet med customElements.define().

klasse OurCustomElement strekker seg HTMLElement {}
vinduet.customElements.define(‘vår-element’, OurCustomElement);

Og vi kan kalle det:

<våre-element></vår-element>

Dette nye elementet er ikke veldig nyttig, men med tilpassede elementer, vi får tre metoder for å utvide funksjonaliteten til dette elementet. Disse er nesten analogt til å Reagere er lifecycle metoder for sine Komponent API. De to lifecycle-lignende metoder som er mest relevante for oss er det disconnectedCallBack og connectedCallback, og siden dette er en klasse, det kommer med en konstruktør.

Navn
Kalles når

constructor En forekomst av elementet opprettes, eller oppgradert. Nyttig for å starte staten, innstillinger opp hendelse lyttere, eller lage Skygge DOM. Se spesifikasjonen for restriksjoner på hva du kan gjøre i konstruktøren.
connectedCallback Elementet er satt inn i den DOM. Nyttig for å kjøre setup-koden, for eksempel å hente ressurser eller gjøre BRUKERGRENSESNITTET. Generelt bør du prøve å forsinke arbeidet til denne gangen
disconnectedCallback Når elementet er fjernet fra DOM. Nyttig for å kjøre clean-up-koden.

For å gjennomføre vår tilpasset element, vil vi opprette klasse, og sette opp noen attributter som er knyttet til det UI:

klasse Depotet strekker seg HTMLElement {
constructor() {
super();

dette.repoDetails = null;

dette.name = dette.getAttribute(“navn”);
dette.endepunktet = `https://api.github.com/repos/${dette.name}”
dette.innerHTML = `<h1>Mates</h1>`
}
}

Ved å ringe super() i vår konstruktør, sammenheng med dette er element i seg selv, og alle DOM-manipulasjon Api kan brukes. Så langt, vi har satt standard oppbevaringsstedet til null, fått repo navn fra elementet ‘ s attributt, opprettet et endepunkt for å ringe, slik at vi slipper å definere det senere og, viktigst av alt, satt den første HTML til å være en indikator for lasting.

For å få detaljer om elementet er på lager, vi kommer til å trenge å gjøre en forespørsel til GitHub API. Vi vil bruke hent og, siden det er Lover-basert, vil vi bruke asynkron og venter på å gjøre våre koden mer lesbar. Du kan lære mer om async/await nøkkelord her, og mer om nettleseren hente API her. Du kan også tweet til meg for å finne ut om jeg foretrekker det til Axios bibliotek. (Hint, det avhenger av om jeg hadde te eller kaffe med min frokost.)

Nå, la oss legge til en metode til denne klassen å spørre GitHub for mer informasjon om depot.

klasse Depotet strekker seg HTMLElement {
constructor() {
// …
}

asynkron getDetails() {
tilbake venter hente(denne.endepunkt, { modus: “corso buenos” }).deretter(res => res.json());
}
}

Neste, la oss bruke connectedCallback metode og Skygge DOM til bruk returverdien fra denne metoden. Ved hjelp av denne metoden vil gjøre noe lignende som når vi kalt Depotet.componentDidMount() i de Reagerer eksempel. I stedet, vi vil overstyre null-verdi vi i utgangspunktet ga dette.repoDetails — vi kommer til å bruke dette senere, når vi begynner å ringe mal for å lage HTML.

klasse Depotet strekker seg HTMLElement {
constructor() {
// …
}

asynkron getDetails() {
// …
}

asynkron connectedCallback() {
la repo = venter på dette.getDetails();
dette.repoDetails = repo;
dette.initShadowDOM();
}

initShadowDOM() {
la shadowRoot = dette.attachShadow({ modus: “åpne” });
shadowRoot.innerHTML = dette.mal;
}
}

Du vil legge merke til at vi kaller metoder knyttet til Skygge DOM. Foruten å være en avvist tittel for en Marvel-film, Skyggen DOM har sitt eget rike API verdt å se nærmere på. For vårt formål, men det kommer til å abstrakte implementering av å legge til innerHTML til elementet.

Nå er vi tilordne innerHTML å være lik verdien av dette.mal. La oss definere som nå:

klasse Depotet strekker seg HTMLElement {
få mal() {
const repo = dette.repoDetails;

// hvis vi får en feilmelding la oss vise at tilbake til brukeren
hvis (repo.melding) {
tilbake `<div class=”Kort–feil”>Feil: ${repo.melding}</div>`
} else {
tilbake `
<div class=”Kort”>
<aside>
<img width=”48″ høyde=”48″ class=”Avatar” src=”${repo.eieren.avatar_url}” alt=”Profil bilde for ${repo.eieren.logg}” />
</side>
<header>
<h2 class=”Kortet__title”>${repo.full_name}</h2>
<span class=”Kortet__meta”>${repo.beskrivelse}</span>
</header>
</div>
`
}
}
}

Det er ganske mye det. Vi har definert et tilpasset element som administrerer sin egen stat, henter sine egne data, og viser til at staten tilbake til brukeren, samtidig som det gir oss et HTML-element til bruk i programmet vårt.

Etter å ha gått gjennom denne øvelsen, jeg fant ut at det bare er nødvendig for avhengighet for tilpassede elementer er nettleserens innfødt Api-snarere enn et rammeverk for å i tillegg analysere og kjøre. Dette gjør for en mer portabel og gjenbrukbare løsning med lignende Api-er til de rammene du allerede elsker og bruke til å lage dine levende.

Det er ulemper med å bruke denne tilnærmingen, selvfølgelig. Vi snakker om ulike nettleser problemer og noen mangel på konsistens. Plus, som arbeider med DOM-manipulasjon Api kan være svært forvirrende. Noen ganger er de oppgaver. Noen ganger er de funksjoner. Noen ganger er disse funksjonene ta en tilbakeringing og noen ganger er de ikke. Hvis du ikke tror meg, ta en titt ved å legge til en klasse til en HTML-element som er opprettet via dokument.createElement(), som er en av de topp fem grunner til å bruke Reagere. Den grunnleggende gjennomføringen er ikke så komplisert, men det er i strid med andre lignende dokument metoder.

Det virkelige spørsmålet er: gjør det selv ut i vask? Kanskje. Reagerer er fortsatt ganske god på ting det er designet for å være svært gode på: den virtuelle DOM, administrerende application state, innkapsling, og passerer data ned treet. Det er nesten ingen insentiv til å bruke tilpassede elementer inni den rammen. Tilpassede elementer, på den annen side, er bare tilgjengelig i kraft av å bygge et program for leseren.

Finn ut mer

  • Tilpassede Elementer v1: Gjenbrukbare Web Components
  • Lage en Native Web-Komponenten med Tilpassede Elementer v1 og Skygge DOM v1

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men den sosiale deling av koblinger ovenfor, sikkerhet og backup, Markdown-støtte, søk nettstedet, kommentar skjemaet, positing til sosiale nettverk-tilkoblinger, og mer!