Een Gids voor de Aangepaste Elementen voor het Reageren Ontwikkelaars

0
12

Ik had voor het bouwen van een UI kort en (voor het eerst in lange tijd) had ik niet de mogelijkheid van het gebruik van React.js mijn voorkeur voor de GEBRUIKERSINTERFACE deze dagen. Dus, heb ik gekeken wat de ingebouwde browser-Api ‘ s te bieden had en zag, dat het gebruik van de aangepaste elementen (aka Web Components) kan de remedie die deze Reageren ontwikkelaar nodig.

Aangepaste elementen kunnen bieden dezelfde algemene voordelen van Reageren onderdelen zonder gebonden te zijn aan een specifiek kader voor de uitvoering. Een aangepast element geeft ons een nieuwe HTML-tag die we kunnen programmatisch beheren via een eigen browser-API.

Laten we praten over de voordelen van component-based GEBRUIKERSINTERFACE:

  • Encapsulation – bezorgdheid binnen het bereik van dat onderdeel blijven in dat onderdeel van de uitvoering
  • Herbruikbaarheid – wanneer de UI is gescheiden in meer algemene stukken, ze zijn makkelijker in te breken in patronen die je bent meer kans om te herhalen
  • Isolatie – , omdat de onderdelen zijn ontworpen om te worden ingekapseld en met dat, krijg je het extra voordeel van isolatie, waardoor u het bereik van fouten en wijzigingen om een specifiek onderdeel van uw aanvraag makkelijker

Use cases

U vraagt zich misschien af die met behulp van aangepaste elementen in de productie. Met name:

  • GitHub is het gebruik van de aangepaste elementen voor hun modale dialoogvensters, auto-en weergavetijd.
  • YouTube ‘ s nieuwe web-app is gebouwd met Polymeer en web components.

Overeenkomsten met de Component API

Wanneer het proberen om te vergelijken Reageren Onderdelen versus aangepaste elementen, vond ik de Api ‘ s echt vergelijkbaar:

  • Ze zijn beide klassen die niet “nieuw” en zijn in staat die uit te breiden met een base class
  • Ze nemen beide een bevestiging van of het verlenen van levenscyclus
  • Beiden statische of dynamische input via props of attributen

Demo

Dus, laten we een kleine applicatie met een opsomming van details over een GitHub repository.

Als ik waren van plan om dit te benaderen met Reageren, ik zou het omschrijven van een eenvoudig onderdeel, zoals deze:

<Naam gegevensopslagruimte=”charliewilco/obsidian” />

Dit onderdeel duurt één prop — de naam van het archief — en wij voeren het als volgt:

klasse Archief breidt Reageren.Onderdeel {
staat = {
repo: null
};

async getDetails(naam) {
terug wachten op fetch(`https://api.github.com/repos/${name}`, {
mode: ‘cors’
}).vervolgens(res => res.json());
}

async componentDidMount() {
const { naam } = dit.rekwisieten;
const repo = wachten op deze.getDetails(naam);
deze.setState({ archief });
}

render() {
const { archief } = dit.staat;

if (!repo) {
terug <h1>Laden</h1>;
}

als (repo.bericht) {
terug <div className=”Kaart–error”>Fout: {repo.bericht}</div>;
}

return (
<div class=”Kaart”>
<terzijde>
<img
width=”48″
height=”48″
class=”Avatar”
src={repo.de eigenaar.avatar_url}
alt=”Profiel foto voor ${repo.de eigenaar.login}”
/>
</terzijde>
<header>
<h2 class=”Kaart__title”>{repo.full_name}</h2>
<span class=”Kaart__meta”>{repo.description}</span>
</header>
</div>
);
}
}

Zie de Pen Reageren Demo – GitHub door Charles (@charliewilco) op CodePen.

Om dit te breken naar beneden verder, we hebben een component dat een eigen staat, dat is de repo details. In eerste instantie hebben we instellen op null, want we hebben geen enkele van die gegevens nog niet, dus we hebben een laad-indicator, terwijl de data wordt opgehaald.

Tijdens het Reageren levenscyclus, gebruiken we het halen om de gegevens van GitHub, set-up van de kaart, en leiden tot een re-render met setState() nadat we de gegevens terug. Al deze verschillende staten de UI neemt zijn vertegenwoordigd in de render () – methode.

Het definiëren van / met Behulp van een Aangepast Element

Door dit te doen met custom-elementen is een beetje anders. Zoals het Reageren component, onze custom-element een attribuut — nogmaals, de naam van de repository en het beheer van haar eigen staat.

Ons element zal er als volgt uitzien:

<github-repo name=”charliewilco/obsidian”></github-repo>
<github-repo name=”charliewilco/niveau.css”></github-repo>
<github-repo name=”charliewilco/reageer-takken”></github-repo>
<github-repo name=”charliewilco/reageer-gluejar”></github-repo>
<github-repo name=”charliewilco/dotfiles”></github-repo>

Zie de Pen Aangepaste Elementen Demo – GitHub door Charles (@charliewilco) op CodePen.

Om te beginnen, alles wat we moeten doen om te definiëren en registreren van een aangepaste element is een klasse maken die strekt het HTMLElement klasse en registreer de naam van het element met customElements.define().

klasse OurCustomElement breidt HTMLElement {}
venster.customElements.define(‘onze-element’, OurCustomElement);

En we noemen het:

<onze-element></element>

Dit is een nieuw element is niet erg handig, maar met aangepaste elementen, krijgen we drie methodes om uit te breiden de functionaliteit van dit element. Deze zijn bijna analoog om te Reageren levenscyclus van methoden voor hun Onderdeel API. De twee lifecycle-achtige methoden het meest relevant voor ons zijn de disconnectedCallBack en de connectedCallback en aangezien dit een klasse, het komt met een constructor.

Naam
Genoemd als

constructor Een exemplaar van het element is gemaakt of bijgewerkt. Handig voor het initialiseren van state, instellingen up-evenement, luisteraars, of het creëren van Schaduw DOM. Zie de specificatie voor beperkingen op wat je kunt doen in de constructor.
connectedCallback Het element is geplaatst in de DOM. Handig voor het uitvoeren van setup code, zoals het ophalen van middelen of het verlenen van UI. Over het algemeen moet je proberen om vertraging werk tot op deze tijd
disconnectedCallback Wanneer het element wordt verwijderd uit de DOM. Handig voor het uitvoeren van code opruimen.

De implementatie van de aangepaste element, maken we de klasse en het opzetten van een aantal kenmerken in verband met de UI:

klasse Archief breidt HTMLElement {
constructor() {
super();

deze.repoDetails = null;

deze.naam = dit.getAttribute(“naam”);
deze.eindpunt = `https://api.github.com/repos/${dit.naam}`
deze.innerHTML = `<h1>het Laden</h1>`
}
}

Door super() aanroept in onze aannemer, de context van dit is het element zelf en de DOM-manipulatie-Api ‘ s kunnen worden gebruikt. Zo ver, we hebben de standaard repository details te null, gekregen van de repo-de naam van het element van het kenmerk van gemaakt, een eindpunt te bellen, zodat we niet later definiëren en, belangrijker nog, de oorspronkelijke HTML om een laad-indicator.

Om de informatie over dat element archief, gaan wij nodig hebben om uw aanvraag te GitHub-API. We gebruiken halen, en aangezien dat de Belofte-gebaseerd, zullen we het gebruik van async en wachten om onze code is beter leesbaar. U kunt meer te weten komen over de async/wachten op trefwoorden hier meer over de browser ophalen API hier. U kunt ook een tweet aan mij om uit te vinden of ik de voorkeur aan de Axios bibliotheek. (Hint, het hangt als ik had thee of koffie bij mijn ontbijt.)

Nu, laten we een methode toevoegen aan deze klasse te vragen GitHub voor meer informatie over de gegevensopslagruimte.

klasse Archief breidt HTMLElement {
constructor() {
// …
}

async getDetails() {
terug wachten halen(deze.eindpunt, { modus: “cors” }).vervolgens(res => res.json());
}
}

Vervolgens laten we gebruik maken van de connectedCallback methode en de Schaduw DOM om het gebruik van de return-waarde van deze methode. Met behulp van deze methode zal iets soortgelijks doen als wanneer we de zogenaamde Repository.componentDidMount() in het Reageren voorbeeld. Plaats, we zullen het overschrijven van de null-waarde die we in eerste instantie gaf.repoDetails — we gebruiken deze later als we beginnen te bellen met de sjabloon voor het maken van de HTML.

klasse Archief breidt HTMLElement {
constructor() {
// …
}

async getDetails() {
// …
}

async connectedCallback() {
laat repo = wachten op deze.getDetails();
deze.repoDetails = repo;
deze.initShadowDOM();
}

initShadowDOM() {
laat shadowRoot = dit.attachShadow({ stand: “open” });
shadowRoot.innerHTML = dit.sjabloon;
}
}

U zult merken dat we het aanroepen van methoden in verband met de Schaduw van de DOM. Naast het feit dat een afgewezen titel voor een Marvel film, de Schaduw van de DOM heeft zijn eigen rijke API moeite waard op zoek naar. Voor onze doeleinden, hoewel, het gaat om abstract de uitvoering van het toevoegen van innerHTML van het element.

Nu we het toewijzen van de innerHTML, gelijk is aan de waarde van dit.sjabloon. Laten we definiëren dat nu:

klasse Archief breidt HTMLElement {
krijg sjabloon() {
const repo = dit.repoDetails;

// als we een foutmelding krijgen laten we zien dat terug naar de gebruiker
als (repo.bericht) {
return `<div class=”Kaart–error”>Fout: ${repo.bericht}</div>`
} else {
terug `
<div class=”Kaart”>
<terzijde>
<img width=”48″ height=”48″ class=”Avatar” src=”${repo.de eigenaar.avatar_url}” alt=”Profiel foto voor ${repo.de eigenaar.login}” />
</terzijde>
<header>
<h2 class=”Kaart__title”>${repo.full_name}</h2>
<span class=”Kaart__meta”>${repo.description}</span>
</header>
</div>
`
}
}
}

Dat is vrij veel. We hebben vastgesteld dat er een aangepaste element dat erin slaagt zijn eigen staat, haalt zijn eigen gegevens, en weerspiegelt dat de staat terug aan de gebruiker tijdens het geven van ons een HTML-element te gebruiken in onze applicatie.

Na het doorlopen van deze oefening, vond ik dat het alleen nodig afhankelijkheid voor custom-elementen is de browser native Api ‘ s in plaats van een kader bovendien parseren en uitvoeren. Dit zorgt voor een meer draagbare en herbruikbare oplossing met vergelijkbare Api ‘ s aan de kaders die u al liefde en gebruik te maken van uw leven.

Er zijn ook nadelen van het gebruik van deze aanpak. We praten over de verschillende browser ondersteuning bij problemen en een gebrek aan consistentie. Plus, het werken met DOM-manipulatie-Api ‘ s kan erg verwarrend zijn. Soms zijn ze opdrachten. Soms worden deze functies. Soms kunnen deze functies nemen een callback en soms zijn ze niet. Als je me niet gelooft, neem een kijkje in het toevoegen van een class aan een HTML-element gemaakt via document.createElement(), dat is een van de top vijf van redenen om gebruik te Reageren. De basic uitvoering is niet zo ingewikkeld, maar het is strijdig met andere soortgelijke document methoden.

De echte vraag is: maakt het nog uit in de was? Misschien. Reageren is nog steeds vrij goed op de dingen is zo ontworpen dat hij heel erg goed in zijn: de virtuele DOM, het beheren van toepassing staat, encapsulation, en het doorgeven van gegevens uit de boom. Er is geen stimulans voor het gebruik van aangepaste elementen binnen dat kader. Aangepaste elementen, aan de andere kant, zijn gewoon beschikbaar door de deugd van het bouwen van een applicatie voor de browser.

Meer informatie

  • Aangepaste Elementen v1: Herbruikbare Onderdelen Web
  • Een Native Web Component met Aangepaste Elementen v1 en Schaduw DOM v1

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de social sharing links boven, beveiliging en back-ups, Markdown ondersteuning, site search, het reactieformulier, positionering, sociale netwerk-verbindingen, en meer!