Grave Seg Inn Reagere Sammenheng

0
36

Du har kanskje lurt på i det siste hva alle buzz handler om Kontekst og hva det kan bety for deg og din Reagerer nettsteder. Før Sammenheng, når ledelsen av staten blir komplisert utover funksjonaliteten til setState, har du sannsynligvis hadde å gjøre bruk av en tredjeparts bibliotek. Takk for de siste oppdateringene av awesome Reagere team, vil vi nå ha Sammenheng som kan hjelpe med noen stat management problemer.

Hva Gjør Sammenheng Løse?

Hvordan kan du flytte staten fra en forelder komponent til et barn komponent som er nestet i komponenten treet? Du vet at du kan bruke Redux til å behandle tilstanden, men du bør ikke ha for å hoppe til Redux i enhver situasjon.

Det er en måte å gjøre dette på uten Redux eller noen andre tredjepart statlig styringsverktøy. Du kan bruke rekvisitter!

Si den funksjonen du ønsker å implementere har en tre-struktur som ligner på det jeg har nedenfor:

Staten liv i App-komponent, og det er behov for i UserProfile og UserDetails komponenter. Du må sende det via rekvisitter ned treet. Hvis komponenter som må denne tilstanden er 10 meter dyp, dette kan bli kjedelig, slitsomt, og feil utsatt. Hver komponent er ment å være som en svart boks — andre komponenter bør ikke være klar over stater som de ikke trenger. Her er et eksempel på et program som passer scenariet ovenfor.

klasse App strekker seg til å Reagere.Komponent {
tilstand = {
bruker: {
brukernavn: ‘jioke’,
fornavn: ‘Kingsley’,
etternavn: ‘Silas’
}
}

render() {
retur(
<div>
<User user={dette.staten.user} />
</div>
)
}
}

const User = (props) => (
<div>
<UserProfile {…rekvisitter.user} />
</div>
)

const UserProfile = (props) => (
<div>
<h2>Profil-Siden av {rekvisitter.brukernavn}</h2>
<UserDetails {…rekvisitter} />
</div>
)

const UserDetails = (props) => (
<div>
<p>Brukernavn: {rekvisitter.brukernavn}</p>
<p>fornavn: {rekvisitter.fornavn}</p>
<p>etternavn: {rekvisitter.etternavn}</p>
</div>
)

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

Vi passerer staten fra én komponent til en annen ved hjelp av rekvisitter. Brukeren komponenten ikke har behov for av staten, men det har til å motta den via rekvisitter for å få ned treet. Dette er akkurat hva vi ønsker å unngå.

Se Penn Reagere Sammenheng API Penn 1 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Sammenheng til Unnsetning!

Reagerer er Sammenheng API gir deg muligheten til å lagre staten i det som ser ut som et program global stat og tilgang det er bare i de komponenter som trenger dem, uten å måtte bore den ned via rekvisitter.

Vi starter med å starte en ny Kontekst bruke Reagere er createContext()

const UserContext = Reagere.createContext({})
const UserProvider = UserContext.Leverandør
const UserConsumer = UserContext.Forbruker

Denne nye Sammenhengen er tilordnet til en const-variabelen, i dette tilfellet, variabelen er UserContext. Du kan se at det er ikke nødvendig å installere et bibliotek nå som createContext() er tilgjengelig i Reaksjon (16.3.0 og over).

Leverandøren komponenten gjør sammenheng tilgjengelig for komponenter som trenger det, som er kalt Abonnenter. Med andre ord, Leverandør-komponent som lar Forbrukerne å abonnere på endringer i sammenheng. Husk at konteksten er lik en global application state. Dermed komponenter som ikke er Forbrukere vil ikke være godkjent sammenheng.

Hvis du er koding lokalt, kontekst-fil vil se ut som dette:

import { createContext } fra “reagerer’

const UserContext = createContext({})
eksport const UserProvider = UserContext.Leverandør
eksport const UserConsumer = UserContext.Forbruker

Leverandør

Vi vil gjøre bruk av Leverandøren i våre overordnede komponent, hvor vi har vår stat.

klasse App strekker seg til å Reagere.Komponent {
tilstand = {
bruker: {
brukernavn: ‘jioke’,
fornavn: ‘Kingsley’,
etternavn: ‘Silas’
}
}

render() {
retur(
<div>
<UserProvider verdi={dette.staten.user}>
<Bruker />
</UserProvider>
</div>
)
}
}

Leverandøren aksepterer en verdi prop skal sendes til det Forbrukeren komponenter etterkommere. I dette tilfellet, vil vi være bestått bruker staten til Forbruker komponenter. Du kan se at vi er ikke bestått staten til Brukeren komponent som rekvisitter. Det betyr at vi kan redigere Brukeren komponent og kan ekskludere rekvisitter siden den ikke trenger dem:

const User = () => (
<div>
<UserProfile />
</div>
)

Forbrukeren

Flere komponenter kan abonnere på en Leverandør komponent. Våre UserProfile komponent behov for å gjøre bruk av kontekst, så det vil du abonnere på den.

const UserProfile = (props) => (
<UserConsumer>
{context => {
retur(
<div>
<h2>Profil-Siden av {sammenheng.brukernavn}</h2>
<UserDetails />
</div>
)
}}
</UserConsumer>
)

De data vi injiseres til Leverandøren via verdien prop blir så gjort tilgjengelig i forbindelse parameter til funksjonen. Vi kan nå bruke denne få tilgang til brukernavnet til brukeren i vår komponent.

Den UserDetails komponent vil ligne på UserProfile komponent siden det er abonnent på samme Leverandør:

const UserDetails = () => (
<div>
<UserConsumer>
{context => {
retur (
<div>
<p>Userame: {sammenheng.brukernavn}</p>
<p>fornavn: {sammenheng.fornavn}</p>
<p>etternavn: {sammenheng.etternavn}</p>
</div>
)
}}
</UserConsumer>
</div>
)

Se Penn Reagere Sammenheng API-Pen 2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Oppdatering Av Staten

Hva hvis vi ønsker å tillate brukere å endre sin første og siste navn? Det er også mulig. Forbruker-komponenter kan re-gjengi når det er endringer til den verdi som er vedtatt av Leverandør komponent. La oss se på et eksempel.

Vi vil ha to feltene for fornavn og etternavn i forbruker-komponent. Fra Leverandør komponent, vil vi ha to metoder som oppdaterer tilstand av programmet ved hjelp av verdier som er angitt i feltene. Nok prat, la oss koden!

Våre App komponenten vil se ut som dette:

klasse App strekker seg til å Reagere.Komponent {
tilstand = {
bruker: {
brukernavn: ‘jioke’,
fornavn: ‘Kingsley’,
etternavn: ‘Silas’
}
}

render() {
retur(
<div>
<UserProvider verdi={
{
tilstand: dette.staten.bruker
tiltak: {
handleFirstNameChange: event => {
const verdi = event.målet.verdi
dette.setState(prevState => ({
bruker: {
…prevState.bruker
fornavn: verdi
}
}))
},

handleLastNameChange: event => {
const verdi = event.målet.verdi
dette.setState(prevState => ({
bruker: {
…prevState.bruker
etternavn: verdi
}
}))
}
}
}
}>
<Bruker />
</UserProvider>
</div>
)
}
}

Vi passerer et objekt som inneholder staten og handlinger til verdien rekvisitter som Leverandøren mottar. Handlinger er metoder som vil bli utløst når en onChange-hendelsen skjer. Verdien av arrangementet blir så brukt til å oppdatere tilstand. Siden vi ønsker å oppdatere enten fornavn eller etternavn, det er et behov for å bevare verdien av de andre. For dette, kan vi gjøre bruk av ES6 Spre Operatør, noe som gjør det mulig for oss å oppdatere verdien av den angitte nøkkelen.

Med de nye endringene, vi trenger å oppdatere UserProfile komponent.

const UserProfile = (props) => (
<UserConsumer>
{({state}) => {
retur(
<div>
<h2>Profil-Siden av {staten.brukernavn}</h2>
<UserDetails />
</div>
)
}}
</UserConsumer>
)

Vi bruker ES6 destructuring å trekke staten på den verdien som er mottatt fra Leverandøren.

For UserDetails komponent, vi både staten og handlinger. Vi må også legge til to feltene som vil lytte etter en onChange – () hendelse og ringe tilsvarende metoder.

const UserDetails = () => {
retur (
<div>
<UserConsumer>
{({ staten, handlinger }) => {
retur (
<div>
<div>
<p>Userame: {staten.brukernavn}</p>
<p>fornavn: {staten.fornavn}</p>
<p>etternavn: {staten.etternavn}</p>
</div>
<div>
<div>
<input type=”text” value={staten.fornavn} onChange={handlinger.handleFirstNameChange} />
</div>
<div>
<input type=”text” value={staten.etternavn} onChange={handlinger.handleLastNameChange} />
</div>
</div>
</div>
)
}}
</UserConsumer>
</div>
)
}

Ved Hjelp Av Standard Verdier

Det er mulig å passere standard verdier ved oppstart Sammenheng. For å gjøre dette, i stedet for å ha passert en tom objekt til createContext(), vil vi gi noen data.

const UserContext = Reagere.createContext({
brukernavn: ‘johndoe’,
fornavn: ‘John’,
etternavn: ‘Nordmann’
})

Å gjøre bruk av denne informasjonen i våre program treet, vi må fjerne leverandør fra treet. Så vår App komponenten vil se ut som dette.

klasse App strekker seg til å Reagere.Komponent {
tilstand = {
bruker: {
brukernavn: ‘jioke’,
fornavn: ‘Kingsley’,
etternavn: ‘Silas’
}
}

render() {
retur(
<div>
<Bruker />
</div>
)
}
}

Se Penn Reagere Sammenheng API Penn 4 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Dataene som vil bli brukt i Forbruker-komponenter vil være ferdig definert når vi initialisert i en ny Kontekst.

I Konklusjon

Når ting blir komplisert, og du er fristet til å kjøre garn installere [<sett inn tredjeparts bibliotek for statlig forvaltning], stopper et øyeblikk — du har Reagere Sammenhengen klar. Ikke du tror meg? Kanskje du vil tro Kent C. Dodds.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!