Ved hjelp av Rekomponere å Dele Funksjonalitet Mellom Reagere Komponenter

0
13

Deling av funksjonalitet mellom Reagere komponenter er en ganske vanlig trenger. Konseptet er at vi kan etablere atferd på ett sted og deretter utvide det på tvers av ulike komponenter. Høyere-Orden Komponenter er én måte å gjøre dette på. Likevel, det er en annen måte å bruke et bibliotek kalt Rekomponere.

GitHub-Repo

Hva er Rekomponere?

Dokumentasjonen som hjelper oss med å svare på det:

Rekomponere er en Reagerer verktøyet belte for funksjon komponenter og høyere-orden-komponenter. Tenk på det som lodash for å Reagere.

I utgangspunktet, det er et bibliotek for å Reagere som inneholder en haug av hjelpere som returnerer annet høyere-ordens komponenter — som er fint fordi det tar noen av de grynt arbeid ut av å definere felles Reagere mønstre og gjøre dem umiddelbart tilgjengelig for å utvide til andre komponenter.

Hva kan den gjøre? Vel, la oss gå gjennom noen eksempler sammen.

Legg til staten for å funksjonelle statsløse komponenter

Hvis du kunne ikke gjette det ved det navnet, en funksjonell statsløse komponenten ikke har noen stater. Det bare aksepterer rekvisitter og returnerer UI til fronten.

const Hilsen = rekvisitter =>
<p>
Hei, {rekvisitter.navn}!
</p>

I situasjoner der du ønsker å gjøre bruk av tilstanden i funksjonelle statsløse komponent, må du konvertere det til en klasse komponent. Dette er hvor Rekomponere kommer i hendig.

Rekomponere gir du med withState() helper å legge til staten til funksjonell statsløse komponenter. Det klarer en enkelt stat verdi. Du kan ikke administrere mer enn én stat verdi i withState() som du vil gjøre i din klasse komponent. Du passere i en funksjon for å oppdatere staten verdi og en valgfri standard oppgitt verdi.

Her er hvordan withState() er strukturert på følgende måte:

withState(
stateName: streng, // navnet vi kaller vår stat
stateUpdaterName: streng, // navnet på funksjonen til å ringe
initialState: alle | (rekvisitter: Objekt) => noen // valgfri standard staten til å passere
): HigherOrderComponent

En counter er en vanlig eksempel som er brukt for å demonstrere et konsept. Her er hvordan vi kan skape en super enkel counter ved hjelp av Rekomponere er withState() helper:

const App = withState(“telle”, “handleCounter”, 0)(({ count, handleCounter }) => {
retur (
<div>
<p>{count}</p>
<- knappen for onClick={() => handleCounter(n => n + 1)}>Tilvekst</button>
<- knappen for onClick={() => handleCounter(n => n – 1)}>Minsk</button>
</div>
);
});

Siden withState() helper er allerede tilgjengelig for oss, vi kan kalle det en gang og gi den med parametere det er behov for. Igjen, disse er:

  • stateName: navnet vi kaller vår stat
  • stateUpdaterName: navnet på funksjonen til å ringe
  • initialState: Valgfri standard staten til å passere

Disse parametrene er så integrert i BRUKERGRENSESNITTET markup vi ønsker å gjengi på fronten.

Det er en annen måte vi kunne ha gjort vårt counter-komponent, og det er verdt å se på for å få mer praksis å sette en Rekomponere hjelper å bruke.

Først oppretter vi en høyere-ordens komponent ved hjelp av withState() og de nødvendige parameterne.

const forbedret = withState(“counter”, “handleCounter”, 0);

Neste, vi gjør Counter-komponenten, som arbeider i withState() parametre:

const Counter = ({ counter, handleCounter }) => (
<div>
<h1>{counter}</h1>
<- knappen for onClick={() => handleCounter(n => n + 1)}>Tilvekst</button>
<- knappen for onClick={() => handleCounter(n => n – 1)}>Minsk</button>
</div>
);

Merk at navnet på staten og oppdatering-funksjonen er gått som rekvisitter til Telleren komponent.

Til slutt, vi skaper våre App-komponenten ved å pakke Counter komponent i høyere for forbedret komponent.

const App = enhanced(Teller);

Se Penn Rekomponere withState av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Her er en annen populær tilnærming:

const forbedret = withState(“telle”, “handleCounter”, 0);
const App = enhanced(({ count, handleCounter }) => {
retur (
<div>
<p>{count}</p>
<- knappen for onClick={() => handleCounter(n => n + 1)}>Tilvekst</button>
<- knappen for onClick={() => handleCounter(n => n – 1)}>Minsk</button>
</div>
);
});

Se Penn Rekomponere withState v2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Håndtere staten bruker withHandlers()

Rekomponere har også en withHandlers() helper som lar deg håndtere staten ved å definere funksjonene som skal brukes til å oppdatere til en komponent staten. Og, du kan bruke den rett ved siden av withState()!

Disse er i utgangspunktet høyere-ordens funksjoner som tar i rekvisitter og returnerer en funksjon handler. La oss bryte ned strukturen som vi gjorde i forrige eksempel.

withHandlers({
incrementCounter: rekvisitter => event => {
event.preventDefault();
rekvisitter.handleCounter(rekvisitter.teller + 1);
}
})

Først av, som vi har identifisert incrementCounter, som vil være tilgjengelig for våre Counter-komponent for å oppdatere count verdi på klikk.

Neste, vi konstruere den telleren som vi gjorde før — som en høyere-ordens komponent ved hjelp av withState():

const enhancedState = withState(“telle”, “handleCounter”, 0);

Nå, vi definere våre funksjoner å sette withHandlers() til å bruke:

const enhancedHandler = withHandlers({
incrementCounter: rekvisitter => event => {
event.preventDefault();
rekvisitter.handleCounter(rekvisitter.teller + 1);
},
decrementCounter: rekvisitter => event => {
event.preventDefault();
rekvisitter.handleCounter(rekvisitter.teller – 1);
}
});

Vi har konstruert en høyere-orden-komponenten vi kaller enhancedHandler og brukes withState() til å angi to-funksjonen behandlere i det: incrementCounter og decrementCounter. Disse handlerne inneholder parametre som vil bli mottatt som rekvisitter av komponenter som kaller dem. De vil bli nødvendig hvis vi vil oppdatere statusen for den komponenten som er definert ved hjelp av withState().

Alright, på å skape vårt counter-komponenten:

const Counter = ({ count, incrementCounter, decrementCounter }) => (
<div>
<h1>{count}</h1>
<- knappen for onClick={incrementCounter}>Tilvekst</button>
<- knappen for onClick={decrementCounter}>Minsk</button>
</div>
);

Se det? Staten og behandlere er forventet å bli vedtatt som rekvisitter til telleren komponent.

For å gjøre bruk av høyere orden komponenter vi definert, må vi passere Counter-komponent for å enhancedHandler og pakk det som en parameter til enhancedState.

Med andre ord:

const App = enhancedState(enhancedHandler(Teller));

Se Penn Rekomponere withState & withHandlers av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Du skriver flere høyere for komponenter

I det siste eksemplet vi gjort bruk av to høyere for komponenter. Er det en bedre kjeding av dem sammen? Definitivt! Rekomponere gir oss et skriv() hjelper til å gjøre akkurat det. Vi kan bruke skriv() for å opprette en komponent som komponerer både høyere for komponentene i en fei.

const forbedret = komponere(
withState(“telle”, “handleCounter”, 0),
withHandlers({
incrementCounter: rekvisitter => event => {
event.preventDefault();
rekvisitter.handleCounter(rekvisitter.teller + 1);
},
decrementCounter: rekvisitter => event => {
event.preventDefault();
rekvisitter.handleCounter(rekvisitter.teller – 1);
}
})
);

Nå, vi kan bruke den forbedrede komponent i vår App komponent:

const App = enhanced(({ count, incrementCounter, decrementCounter }) => {
retur (
<div>
<p>{count}</p>
<- knappen for onClick={incrementCounter}>Tilvekst</button>
<- knappen for onClick={decrementCounter}>Minsk</button>
</div>
);
});

Se Penn Rekomponere – skriv withState & withHandlers av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Administrere staten bruker Redux som redusering

En annen fin ting Rekomponere gjør, er å tillate deg å administrere tilstand ved hjelp av en redusering funksjon (withReducer). En redusering oppdateringer tilstanden til en komponent i respons til en bestemt handling.

Strukturen i withReducer() ser ut som dette:

withReducer<S>(
stateName: string,
dispatchName: string,
redusering: (state: S, følgende: A) => S,
initialState: S | (ownerProps: Objekt) => S
): HigherOrderComponent</S>

Den første parameteren er navnet på staten. Den andre er utsendelse metode. utsendelse vil bli brukt i fordeling handlinger som vi har i Redux. Neste, vi har redusering, og den opprinnelige tilstand.

I sammenheng med vårt counter-komponent, withReducer() vil oppdatere statusen for de teller: antall vil gå opp med en handling vil vi kalle tilvekst og, omvendt, teller vil gå ned med en handling vil vi kalle minsk.

Først oppretter vi en forbedret komponent ved å komponere withReducer og withHandlers.

const forbedret = komponere(
withReducer(
“telle”,
“utsending”,
(staten, action) => {
bryteren (handling.type) {
saken “TILVEKST”:
tilbake stat + 1;
tilfellet “MINSK”:
tilbake state – 1;
standard:
tilbake stat;
}
},
0
),
withHandlers({
incrementCounter: ({ utsendelse }) => e => utsendelse({ type: “TILVEKST” }),
decrementCounter: ({ utsendelse }) => e => utsendelse({ type: “MINSK” })
})
);

incrementCounter og decrementCounter vil svare til en DOM hendelser og sende en handling type. Staten vil være oppdatert avhengig av type handling. Neste, vi trenger å gjøre bruk av dette i vår komponent.

const App = enhanced(({ count, incrementCounter, decrementCounter }) => {
retur (
<div>
<p>{count}</p>
<- knappen for onClick={incrementCounter}>Tilvekst</button>
<- knappen for onClick={decrementCounter}>Minsk</button>
</div>
);
});

Se Penn Rekomponere – redusering av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Ganske kult, ikke sant?

Forhåpentligvis gir dette deg en god ide om hva Rekomponere er og hvordan biblioteket er vell av hjelpere kan effektivisere Reagere utvikling, spesielt når det gjelder å administrere og telefoni stater.

Naturligvis, det er mye mer å Rekomponere enn hva vi har dekket her. En rask skanning av API-dokumentasjonen vil vise at det er mange høyere for komponenter som du kan sette til å bruke, avhengig av programmets krav. Gå tilbake, bygge, og vær så snill og føl fri til å slippe en kommentar dersom du har noen spørsmål!