Hva er Høyere For Komponenter i Reagerer?

0
53

Hvis du har vært i den Reagerer økosystem for en stund, det er en mulighet for at du har hørt om Høyere Orden Komponenter. La oss se på en enkel implementering samtidig prøver å forklare kjernen i ideen. Her skal du få en god idé om hvordan de jobber og selv sette dem til å bruke.

Hvorfor Høyere For Komponenter?

Som du bygger Reagere programmer, vil du kjøre inn i situasjoner der du ønsker å dele samme funksjonalitet på tvers av flere komponenter.

For eksempel: du trenger for å administrere staten påloggede brukere i din søknad. I stedet for å administrere at staten på tvers av alle komponenter som trenger at staten, kan du opprette et høyere-komponent for å skille den påloggede brukeren staten inn i en container komponent, så pass på at tilstanden til komponenter som vil gjøre bruk av den.

Komponentene som mottar statlig fra høyere for komponenten vil fungere som eit presentasjonsproblem komponenter. Staten blir formidlet til dem, og de betinget gjengi UI basert på det. De gidder ikke med ledelsen av staten.

La oss se på et annet eksempel. Si at du har tre JSON-filer i din søknad. Disse filene kan inneholde forskjellige data som vil bli lagt inn i programmet i tre forskjellige komponenter. Du ønsker å gi dine brukere mulighet til å søke etter data som er lastet ned fra disse filene. Du kan implementere et søk-funksjonen i alle de tre komponentene. Dette duplisering kan ikke være et problem i begynnelsen, men siden programmet vokser og flere komponenter som trenger denne funksjonaliteten, konstant duplisering vil være tungvint og utsatt for problemer.

En bedre måte fremover er å skape en høyere-komponent for å håndtere søkefunksjonalitet. Med det, du kan bryte de andre komponentene enkeltvis i høyere for komponenten.

Hvordan gjøre Høyere For Komponentene Fungerer?

Den Reagerer dokumenter si at høyere for komponenter ta en komponent og gå tilbake til en komponent.

Bruk av høyere orden komponenter kommer i hendig når du er klar arkitektonisk for å skille container komponenter fra presentasjon komponenter. Presentasjonen komponent er ofte en statsløs funksjonell komponent som tar rekvisitter og gjør UI. En statsløs funksjonelle komponenter er vanlig JavaScript-funksjoner som ikke har stater. Her er et eksempel:

import Reagere fra “reagerer’

const App = ({name}) => {
retur (
<div>
<h2>Dette er en funksjonell komponent. Ditt navn er {name}.</h2>
</div>
)
}

ReactDOM.render(<App name=’Kingsley’/>, – dokument.bürgerliches(“root”));

Beholderen komponenten gjør jobben for styring av staten. Beholderen, i dette tilfellet, er høyere for komponenten.

I søk-eksempel vi snakket om tidligere, søk komponenten ville være beholderen komponent som styrer søk staten og wraps presentasjon komponenter som må søke-funksjonalitet. Presentasjonen komponenter ellers har ingen anelse av staten, eller hvordan den blir forvaltet.

En Høyere-Komponent For Eksempel

La oss starte med et enkelt eksempel. Her er en høyere-orden-komponent som forvandler og returnerer brukernavn i store bokstaver:

const hoc = (WrappedComponent) => (props) => {
retur (
<div>
<WrappedComponent {…rekvisitter}>
{rekvisitter.barn.toUpperCase()}
</WrappedComponent>
</div>
)
}

Denne høyere for komponent mottar en WrappedComponent som et argument. Deretter går den tilbake ny komponent med rekvisitter gått til det å skape et Reagere element. Vi ringer .toUpperCase() på rekvisitter.barn, å transformere gått rekvisitter.barna til store bokstaver.

Å gjøre bruk av dette høyere-orden-komponent, må vi lage en komponent som mottar rekvisitter og gjengir barn.

const Username = (props) => (
<div>{rekvisitter.barn}</div>
)

Neste, vi pakker Brukernavn med høyere orden komponent. La oss lagre det i en variabel:

const UpperCaseUsername = hoc(Brukernavn)

I våre App-komponent, kan vi nå gjøre bruk av det som dette:

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

Den UpperCaseUsername komponent er bare en gjengivelse av Brukernavn UI, som i sin tur trekker i staten fra WrappedComponent fungerer som høyere orden komponent.

En Mer Praktisk Høyere-Orden-Komponenten

Forestille vi ønsker å lage en liste over steder med et søk form som filtrerer dem. JSON vil være i flate filer og lagt inn som separate komponenter. La oss starte med lasting av data.

Vår første komponenten vil laste steder for våre brukere. Vi vil gjøre bruk av .kart() til å gå gjennom dataene som finnes i denne JSON-fil.

import Reagere fra “reagerer’
// Hvor data ligger
import preload fra ‘./steder.json’
// Forvalter data
import LocationCard fra ‘./LocationCard’

// Gjør presentasjonen av data
const Location = (props) => {
retur (
<div>
<div>
<div>
<h2>Foretrukne Steder</h2>
</div>
</div>
<div>
{preload.data
.kart(location => <LocationCard key={beliggenhet.id} {…plassering} />)}
</div>
</div>
)
}
eksport standard Plassering

Denne komponenten vil føre til at dataene i en LocationCard komponent. Jeg flyttet det til en annen komponent for å holde ting klart. Denne komponenten er en funksjonell komponent som tar seg av presentasjonen av våre data. Data (plassering) fra filen er mottatt via rekvisitter, og hvert sted vil bli sendt ned til LocationCard komponent.

Nå trenger vi en annen komponent som, til slutt, også må søke-funksjonalitet. Det vil være svært lik den første komponenten som vi nettopp bygget, men det vil ha et annet navn, og laste inn data fra et annet sted.

Vi ønsker at våre brukere til å være i stand til å søke etter elementer ved hjelp av en input-feltet. Listen over elementer som vises på app bør være bestemt av staten på søk. Denne funksjonaliteten vil bli delt på tvers av de to komponentene vi arbeider på. Takk til ideen av høyere orden komponenter, kan vi skape et søk container komponent og vikle den rundt andre komponenter.

La oss kalle den komponenten withSearch. Denne komponenten vil gi input-feltet for søk og også administrere våre searchTerm staten. Den searchTerm vil bli vedtatt som rekvisitter til innpakket komponent, som vil bli brukt til å filtrere trakk data:

import Reagere, { Komponent } fra “reagerer’

const withSearch = (WrappedComponent) => {
tilbake klasse strekker seg Komponent {
tilstand = {
searchTerm:”
}
handleSearch = event => {
dette.setState({ searchTerm: event.målet.value })
}

render() {
retur (
<div>
<div>
<input onChange={dette.handleSearch} value={dette.staten.searchTerm} type=”text” plassholder=”Søk” />
</div>
<WrappedComponent searchTerm={dette.staten.searchTerm} />
</div>
)
}
}

}
eksport standard withSearch

Den searchTerm er gitt en tilstand av en tom streng. Den verdien som er angitt av brukeren i søk-boksen er hentet inn og brukt for å angi den nye staten for searchTerm. Neste, vi passerer searchTerm til WrappedComponent. Vi vil gjøre bruk av denne ved filtrering av data.

For å gjøre bruk av høyere orden komponent, må vi gjøre noen endringer i våre eit presentasjonsproblem komponent.

import Reagere, { Komponent } fra “reagerer’
// Hvor data ligger
import preload fra ‘./steder.json’
// Søk data
import withSearch fra ‘./withSearch
// Forvalter data
import LocationCard fra ‘./LocationCard’

// Gjør presentasjonen av data
const Location = (props) => {
const { searchTerm } = rekvisitter

retur (
<div>
<div>
<div>
<h2>Foretrukne Steder</h2>
</div>
</div>
<div>
{preload.data
// Filter steder etter angitt søkeord
.filteret(location => `${location.navn} ${location.sone} ${location.regionen}`.toUpperCase().indexOf(searchTerm.toUpperCase()) >= 0)
// Loop gjennom steder
.kart(location => <LocationCard key={beliggenhet.id} {…plassering} />)}
</div>
</div>
)
}
eksport standard withSearch(Plassering)

Det første vi gjorde ovenfor er å importere høyere-orden komponent. Deretter legger vi på et filter metode for å filtrere data basert på hva brukeren skriver inn i søkeboksen. Sist, vi trenger å pakke den med withSearch komponent.

Se Penn hoc-Pennen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Konklusjon

Høyere-For Komponenter som ikke trenger å være skremmende. Etter å forstå det grunnleggende, kan du sette det konseptet i bruk av abstracting unna funksjonaliteter som kan deles mellom ulike komponenter.

Flere Ressurser

  • Høyere-Orden Komponenter – Reagerer Dokumentasjon
  • Reagerer Høyere For Komponenter i dybden – av Fran Guijarro
  • Høyere Orden Komponenter i Reagerer – med Chris Nwamba
  • Flere Eksempler – CodePen samling