Vad är Högre För Komponenter i att Reagera?

0
25

Om du har varit i ekosystem Reagerar på ett tag, det finns en möjlighet att du har hört talas om Högre För Komponenter. Låt oss titta på en enkel implementering och samtidigt försöker förklara den centrala idén. Här ska du få en god uppfattning om hur de fungerar och även få dem att använda.

Varför Högre För Komponenter?

När du bygger Reagera program, kommer du att stöta på situationer där du vill dela samma funktioner på flera komponenter.

Till exempel: du behöver för att hantera tillståndet för inloggade användare på din ansökan. I stället för att hantera den staten över alla de komponenter som du behöver att staten, skulle du kunna skapa en högre ordning komponent för att skilja den inloggade användaren staten i en behållare komponent, så pass att staten till de komponenter som kommer att använda sig av det.

De komponenter som får tillstånd från högre för komponent kommer att fungera som utgångna komponenter. Staten får överföras till dem och de villkorligt göra ANVÄNDARGRÄNSSNITT baserat på det. De behöver inte bry sig om förvaltningen av staten.

Låt oss se ett annat exempel. Säg att du har tre JSON-filer i din ansökan. Dessa filer innehåller olika data som laddas i din ansökan på tre olika komponenter. Du vill ge dina användare möjlighet att söka i data laddas från dessa filer. Du kan genomföra en sökfunktion på alla tre komponenter. Detta dubbelarbete kan inte vara ett problem i början, men som din ansökan växer och fler komponenter som behövs för denna funktionalitet, den ständiga upprepningar kommer att bli besvärligt och kan lätt leda till problem.

En bättre väg att gå är att skapa en högre ordning komponent för att hantera sökfunktionen. Med det, du kan slå de andra delarna var för sig i ditt högre syfte komponent.

Hur gör Högre-För-Komponenter Arbeta?

Den Reagerar docs säga att högre för komponenter ta en komponent och tillbaka en komponent.

Användning av högre ordningens komponenter är praktiskt när du är arkitektoniskt redo för att separera komponenter behållare från presentation komponenter. Presentationen komponent är ofta en statslös funktionell komponent som tar rekvisita och gör UI. En statslös funktionella komponenter är enkla JavaScript-funktioner som inte har staterna. Här är ett exempel:

importera Reagerar från ‘reagerar’

const App = ({name}) => {
avkastning (
<div>
<h2>Detta är en funktionell del. Ditt namn är {namn}.</h2>
</div>
)
}

ReactDOM.render(<Appens namn=’Kingsley’ / > handling.getElementById(“root”));

Behållaren komponent gör jobbet för hantering av staten. Container, i detta fall, är högre för komponent.

I sökandet exempel har vi pratat om tidigare, sök komponent skulle vara behållaren komponent som hanterar söka tillstånd och wraps presentationen komponenter som du behöver sökfunktionen. Presentationen komponenter i övrigt har ingen aning om stat eller hur det sköts.

En Högre Ordningens Komponent Exempel

Låt oss börja med ett enkelt exempel. Här är en högre ordningens komponent som omvandlar och returnerar användarnamn i versaler:

const hoc – = (WrappedComponent) => (rekvisita) => {
avkastning (
<div>
<WrappedComponent {…rekvisita}>
{rekvisita.barn.toUpperCase()}
</WrappedComponent>
</div>
)
}

Denna högre ordning komponent får en WrappedComponent som ett argument. Sen återvänder ny komponent med rekvisita som skickas till det att skapa en Reagera element. Vi kallar .toUpperCase() på rekvisita.barn, att förvandla gått rekvisita.barn till versaler.

Att använda sig av denna högre ordning komponent, vi behöver skapa en komponent som får rekvisita och gör barn.

const Användarnamn = (rekvisita) => (
<div>{rekvisita.barnen}</div>
)

Nästa, vi wrap Användarnamn med högre ordningens komponent. Låt oss att lagra i en variabel:

const UpperCaseUsername = hoc(Användarnamn)

I vår App komponent, kan vi nu använda sig av det så här:

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

Den UpperCaseUsername komponent är endast en återgivning av Användarnamn UI, som i sin tur drar in tillstånd från WrappedComponent fungerar som den högre ordningens komponent.

En Mer Praktisk Högre För Komponent

Tänk att vi vill skapa en lista över platser med ett sökformulär som filtrerar dem. JSON kommer att vara i platt-filer och lastas av som separata komponenter. Låt oss börja med att läsa in data.

Vår första komponenten kommer att ladda platser för våra användare. Vi kommer att använda sig av .karta() för att gå igenom de uppgifter som finns i JSON-filen.

importera Reagerar från ‘reagerar’
// Där data ligger
importera förspänning från”. /platser.json’
// Hanterar uppgifter
importera LocationCard från”. /LocationCard’

// Gör presentationen av data
const Plats = (rekvisita) => {
avkastning (
<div>
<div>
<div>
<h2>Föredrog Platser</h2>
</div>
</div>
<div>
{förspänning.data
.karta(location => <LocationCard key={läge.id} {läge…} />)}
</div>
</div>
)
}
export standard Läge

Den här komponenten att göra uppgifterna i ett LocationCard komponent. Jag flyttade till en annan del för att hålla saker och ting klart. Denna komponent är en funktionell komponent som hanterar presentation av våra data. Data (läge) från filen är mottagen via rekvisita, och varje plats kommer att vidarebefordras till LocationCard komponent.

Nu behöver vi en andra komponent som, så småningom, också kommer att behöva söka funktionalitet. Det kommer att vara mycket lik den första komponenten som vi nyss byggt, men det kommer att ha olika namn och läsa in data från en annan plats.

Vi vill att våra användare ska kunna söka efter objekt med hjälp av en input-fält. Listan över objekt som visas på app bör bestämmas av staten för sökning. Denna funktion kommer att delas mellan de två komponenter som vi arbetar med. Tack till idén av högre ordning komponenter, kan vi skapa en sökning behållare komponent och linda den runt andra komponenter.

Låt oss kalla den komponent withSearch. Den här komponenten att göra inmatningsfältet för vår sökning och även hantera våra searchTerm staten. Den searchTerm kommer att skickas som rekvisita till insvept komponent, som kommer att användas för att filtrera drog uppgifter:

importera Reagera, { Komponent } ‘reagerar’

const withSearch = (WrappedComponent) => {
avkastning klass sträcker Komponent {
state = {
searchTerm:”
}
handleSearch = evenemanget => {
detta.setState({ searchTerm: händelse.- målet.värde })
}

render() {
avkastning (
<div>
<div>
<ingång onChange={detta.handleSearch} värde={detta.stat.searchTerm} type=”text” platshållare=”Sökning” />
</div>
<WrappedComponent searchTerm={detta.stat.searchTerm} />
</div>
)
}
}

}
export standard withSearch

Den searchTerm ges ett tillstånd av en tom sträng. Värdet som anges av användaren i rutan sök, framställs och används för att ställa in den nya staten för searchTerm. Nästa, vi passerar searchTerm till WrappedComponent. Vi kommer att använda sig av detta när du filtrerar data.

Att använda sig av den högre ordningens komponent, vi behöver göra några förändringar i vårt presentationsmaterial komponent.

importera Reagera, { Komponent } ‘reagerar’
// Där data ligger
importera förspänning från”. /platser.json’
// Söker uppgifter
importera withSearch från”. /withSearch
// Hanterar uppgifter
importera LocationCard från”. /LocationCard’

// Gör presentationen av data
const Plats = (rekvisita) => {
const { searchTerm } = rekvisita

avkastning (
<div>
<div>
<div>
<h2>Föredrog Platser</h2>
</div>
</div>
<div>
{förspänning.data
// Filter platser av inmatade sökord
.filter(location => `${location.namn} ${location.zon} ${location.region}`.toUpperCase().indexOf(searchTerm.toUpperCase()) >= 0)
// Gå igenom platser
.karta(location => <LocationCard key={läge.id} {läge…} />)}
</div>
</div>
)
}
export standard withSearch(Läge)

Det första vi gjorde ovan är att importera högre för komponent. Då kan vi lägga till ett filter metod för att filtrera de data som baseras på vad användaren skriver in i sökrutan. Sist, vi måste slå den med withSearch komponent.

Se Pennan hoc-Pen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Slutsats

Högre ordningens Komponenter behöver inte vara skrämmande. Efter att ha förståelse för grunderna, kan du sätta begreppet att använda genom att abstrahera bort funktioner som kan delas mellan olika komponenter.

Fler Resurser

  • Högre Ordningens Komponenter Reagera Dokumentation
  • Reagera Högre För Komponenter i djup – av Fran Guijarro
  • Högre För Komponenter Reagerar – av Chris Nwamba
  • Fler Exempel – samling CodePen