Wat zijn Hogere Orde Componenten in Reageren?

0
43

Als u in het Reageren ecosysteem voor een tijdje, er is een mogelijkheid die je hebt gehoord over Hogere Orde Componenten. Laten we eens kijken naar een eenvoudige implementatie, terwijl ook proberen om uit te leggen de kern idee. Vanaf hier moet je een goed idee krijgt van hoe ze werken en ze zelfs te gebruiken.

Waarom Een Hogere Orde Componenten?

Als u het bouwen van Reageren toepassingen, zul je in situaties waar je wilt delen dezelfde functionaliteit over meerdere onderdelen.

Bijvoorbeeld: u moet het beheer van de staat van ingelogde gebruikers in uw toepassing. In plaats van het beheer van die staat in alle onderdelen dat moet die staat, je zou kunnen maken van een hogere-orde component te scheiden van de ingelogde gebruiker staat in een container component, dan pas die van de staat om de componenten die gebruik maken van het.

De onderdelen die staatssteun ontvangen van de hogere-orde component zal functioneren als visuele componenten. De staat wordt doorgegeven aan hen en ze voorwaardelijk renderen UI gebaseerd. Ze doen geen moeite met het beheer van de staat.

Laten we eens kijken naar een ander voorbeeld. Stel je hebt drie JSON-bestanden in uw toepassing. Deze bestanden bevatten verschillende gegevens zullen worden geladen in uw toepassing in drie verschillende onderdelen. U wilt dat uw gebruikers de mogelijkheid te zoeken in de geladen gegevens uit deze bestanden. U kan implementeren van een zoekfunctie in alle drie de onderdelen. Deze duplicatie is misschien niet een probleem, maar als uw toepassing groeit en meer onderdelen van deze functionaliteit, de constante verdubbeling zwaar en gevoelig voor de problemen.

Een betere manier om vooruit te gaan is het creëren van een hogere-orde component voor het verwerken van de zoekfunctie. Met het, kunt u wikkel de andere componenten in je hogere-orde component.

Hoe doen van een Hogere Orde Componenten Werken?

Het Reageren docs zeggen dat van een hogere orde componenten een component en het retourneren van een component.

Het gebruik van een hogere orde componenten van pas komt als je zijn architectonisch klaar voor het scheiden van de verpakking onderdelen van de presentatie componenten. De presentatie component is vaak een staatloze functionele component dat neemt rekwisieten en maakt de UI. Een staatloze functionele componenten plain JavaScript-functies die niet hebben staten. Hier is een voorbeeld:

importeren Reageren van ‘reageren’

const App = ({naam}) => {
return (
<div>
<h2>Dit is een functionele component. Uw naam is {naam}.</h2>
</div>
)
}

ReactDOM.render(<App name= “Kingsley’ / > document.getElementById(“root”));

De container component is de taak van het beheren van state. De container, in dit geval is de hogere-orde component.

In het voorbeeld zoeken we het eerder over had, het zoeken onderdeel zou worden van de container component beheert de zoekresultaten en wraps de presentatie componenten nodig die de search functionaliteit. De presentatie onderdelen anders hebben geen idee van de staat of hoe het wordt beheerd.

Een Hogere-Orde Component Voorbeeld

Laten we beginnen met een eenvoudig voorbeeld. Hier is een hogere-orde component die transformeert en geeft gebruikersnamen in hoofdletters:

const hoc = (WrappedComponent) => (rekwisieten) => {
return (
<div>
<WrappedComponent {…props}>
{rekwisieten.kinderen.toUpperCase()}
</WrappedComponent>
</div>
)
}

Deze hogere-orde component ontvangt een WrappedComponent als argument. Dan geeft nieuwe component met rekwisieten doorgegeven aan het creëren van een Reageren element. Wij noemen .toUpperCase() op de rekwisieten.kinderen, om het transformeren van de doorgegeven rekwisieten.kinderen met een hoofdletter.

Om gebruik te maken van deze hogere-orde component, we moeten een onderdeel voor ontvangst van rekwisieten en maakt de kinderen.

const Username = (rekwisieten) => (
<div>{rekwisieten.kinderen}</div>
)

Vervolgens wikkelen we de Gebruikersnaam met de hogere-orde component. Laten we dat opslaan in een variabele:

const UpperCaseUsername = hoc(Gebruikersnaam)

In onze App component, we kunnen nu gebruik maken van deze:

const App = () => (
<div>
<UpperCaseUsername>Kingsley</UpperCaseUsername>
</div>
);

De UpperCaseUsername component is slechts een weergave van de Gebruikersnaam UI die, op zijn beurt, trekt de staat van de WrappedComponent handelen als de hogere-orde component.

Een Meer Praktische Hogere-Orde Component

Stel we willen een lijst maken van locaties met een formulier dat de filters. De JSON zal worden in platte bestanden geladen worden als afzonderlijke componenten. Laten we beginnen met het inladen van de gegevens.

Onze eerste component wordt geladen locaties voor onze gebruikers. Wij maken gebruik van .kaart() loop door de gegevens in die JSON-bestand.

importeren Reageren van ‘reageren’
// Waar de gegevens zich
importeren van voorbelasting ‘./locaties.json’
// Beheert de gegevens
importeren LocationCard uit ‘./LocationCard’

// Geeft de presentatie van de gegevens
const Locatie = (rekwisieten) => {
return (
<div>
<div>
<div>
<h2>beste Locaties</h2>
</div>
</div>
<div>
{preload.gegevens
.kaart(locatie => <LocationCard key={locatie.id} {…locatie} />)}
</div>
</div>
)
}
export standaard Locatie

Dit onderdeel zal maken van de gegevens in een LocationCard component. Ik verplaatst naar een andere component om dingen duidelijk. Dit onderdeel is een functionele component die zorgt voor de presentatie van onze gegevens. De gegevens (locatie) van het bestand ontvangen via rekwisieten, en elke locatie zal worden doorgegeven aan de LocationCard component.

Nu moeten we een tweede onderdeel dat, uiteindelijk, ook moet de zoekfunctie. Het zal zeer vergelijkbaar met het eerste onderdeel dat we net gebouwd, maar het zal wel een andere naam en het laden van gegevens uit een andere plaats.

We willen dat onze gebruikers in staat om te zoeken naar artikelen met behulp van een input-veld. De lijst van de items die worden weergegeven op de app moet worden bepaald door de staat van de zoektocht. Deze functionaliteit zal worden verdeeld over de twee onderdelen werken we aan. Dankzij het idee van hogere orde componenten, maken we zoeken container component en wikkel het rond andere onderdelen.

Noem het onderdeel withSearch. Dit onderdeel zal maken van het veld voor ons zoeken en ook het beheer van onze zoekterm staat. De zoekterm wordt doorgegeven als rekwisieten voor de gewikkeld component, die zal worden gebruikt voor het filteren van de getrokken gegevens:

importeren Reageren, { Component } van ‘reageren’

const withSearch = (WrappedComponent) => {
terug klasse breidt Onderdeel {
staat = {
zoekterm:”
}
handleSearch = event => {
deze.setState({ zoekterm: evenement.doel.value })
}

render() {
return (
<div>
<div>
<input onChange={dit.handleSearch} value={dit.staat.zoekterm} type=”text” placeholder=”Zoeken” />
</div>
<WrappedComponent zoekterm={dit.staat.zoekterm} />
</div>
)
}
}

}
export standaard withSearch

De zoekterm wordt gegeven in een staat van een lege tekenreeks. De door de gebruiker ingevoerde waarde in het vak zoeken is verkregen en gebruikt voor het instellen van de nieuwe staat voor de zoekterm. Vervolgens passeren we zoekterm voor het WrappedComponent. We zullen gebruik maken van deze optie wanneer het filteren van de gegevens.

Om gebruik te maken van de hogere-orde component, moeten we enkele wijzigingen aan onze visuele component.

importeren Reageren, { Component } van ‘reageren’
// Waar de gegevens zich
importeren van voorbelasting ‘./locaties.json’
// Zoekopdrachten van de gegevens
importeren withSearch uit ‘./withSearch
// Beheert de gegevens
importeren LocationCard uit ‘./LocationCard’

// Geeft de presentatie van de gegevens
const Locatie = (rekwisieten) => {
const { zoekterm } = rekwisieten

return (
<div>
<div>
<div>
<h2>beste Locaties</h2>
</div>
</div>
<div>
{preload.gegevens
// Filter locaties door de ingevoerde zoekopdracht
.filter(locatie => `${locatie.name} ${locatie.zone} ${locatie.regio’}`.toUpperCase().indexOf(opgeven.toUpperCase()) >= 0)
// Loop door de locaties
.kaart(locatie => <LocationCard key={locatie.id} {…locatie} />)}
</div>
</div>
)
}
export standaard withSearch(Locatie)

Het eerste wat we hierboven gedaan is voor het importeren van de hogere-orde component. Vervolgens voegen we een filter methode om de gegevens te filteren op basis van wat de gebruiker invoert in de zoekterm. Laatste moeten we wikkel het met de withSearch component.

Zie de Pen hoc Pen door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Conclusie

Van een hogere Orde Componenten niet te eng zijn. Na het begrijpen van de basisprincipes, kunt u het concept om te gebruiken door de abstractie van afstand functionaliteiten die kunnen worden gedeeld tussen de verschillende componenten.

Meer Middelen

  • Van Een Hogere Orde Componenten – Reageren Documentatie
  • Reageren Hogere Orde Componenten in de diepte – door Fran Guijarro
  • Hogere Orde Componenten op te Reageren – door Chris Nwamba
  • Meer Voorbeelden – CodePen collectie