Gräva I Sammanhang Reagera

0
38

Du kanske har undrat nyligen vad allt surr handlar om Sammanhang och vad det kan innebära för dig och din Reagera webbplatser. Innan Sammanhang, när ledningen för staten blir komplicerat utöver den funktionalitet setState, du sannolikt hade att göra användningen av en tredje part bibliotek. Tack vare senaste uppdateringar av awesome Reagerar laget, vi nu har Sammanhang som kan hjälpa till med vissa statliga administrativa frågor.

Vad Gör Sammanhang Lösa?

Hur gör du för att flytta tillstånd från en förälder komponent för att ett barn komponent som är kapslade i den del träd? Du vet att du kan använda Redux att hantera statliga, men du ska inte behöva hoppa till Redux i varje situation.

Det är ett sätt att göra detta utan att Redux eller någon annan tredje part staten verktyg. Du kan använda rekvisita!

Säga den funktion som du vill genomföra har en trädstruktur liknande till vad jag har nedan:

Staten liv i App komponent och som behövs i UserProfile och UserDetails komponenter. Du behöver skicka den via rekvisita ner trädet. Om komponenter som du behöver detta tillstånd är 10 steg för djupt, det här kan bli jobbigt, tröttsamt, och risk för fel. Varje komponent är tänkt att vara som en svart låda — andra komponenter bör inte vara medvetna om att de inte behöver. Här är ett exempel på ett program som matchar det scenario som ovan.

klass App sträcker sig Reagera.Komponent {
state = {
user: {
användarnamn: ‘jioke’,
förnamn: ‘Björn’,
efternamn: ‘Silas
}
}

render() {
avkastning(
<div>
<Användaren user={detta.stat.användaren} />
</div>
)
}
}

const User = (rekvisita) => (
<div>
<UserProfile {…rekvisita.användaren} />
</div>
)

const UserProfile = (rekvisita) => (
<div>
<h2>Profil-Sida på {rekvisita.username}</h2>
<UserDetails {…rekvisita} />
</div>
)

const UserDetails = (rekvisita) => (
<div>
<s>Användarnamn: {rekvisita.username}</p>
<p>Första Namnet: {rekvisita.förnamn}</p>
<p>efternamn: {rekvisita.efternamn}</p>
</div>
)

ReactDOM.render(<App / > handling.getElementById(“root”));

Vi passerar den stat från en komponent till en annan med hjälp av rekvisita. User-komponenten har inget behov av staten, men det måste få det via rekvisita för att få ner trädet. Detta är precis vad vi vill undvika.

Se Pennan Reagera Sammanhang API Penna 1 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Bakgrund till Undsättning!

Reagera Kontext API ger dig möjlighet att lagra tillståndet i vad som ser ut som en ansökan global stat och tillgång endast i de komponenter som behöver dem, utan att behöva borra ner via rekvisita.

Vi börjar med att initiera ett nytt Sammanhang med att Reagera är createContext()

const UserContext = Reagera.createContext({})
const UserProvider = UserContext.Leverantör
const UserConsumer = UserContext.Konsument

Detta nya Sammanhang som är kopplat till en const variabel, i detta fall måste variabeln är UserContext. Du kan se att det finns inget behov av att installera ett bibliotek nu att createContext() finns tillgänglig i att Reagera (16.3.0 och ovan).

Leverantören del gör det sammanhang som finns för komponenter som behöver det, som kallas för Prenumeranter. Med andra ord, den som tillhandahåller komponent som gör det möjligt för Konsumenterna att prenumerera på ändringar i sammanhanget. Kom ihåg att förutsättningarna är liknande till en global ansökan staten. Alltså, komponenter som inte är Konsumenter kommer inte tecknas för sammanhanget.

Om du är kodning lokalt, din sammanhang filen ser ut så här:

import { createContext } ‘reagerar’

const UserContext = createContext({})
export const UserProvider = UserContext.Leverantör
export const UserConsumer = UserContext.Konsument

Leverantör

Vi kommer att göra bruk av Leverantören i våra överordnade delen, där vi har vårt tillstånd.

klass App sträcker sig Reagera.Komponent {
state = {
user: {
användarnamn: ‘jioke’,
förnamn: ‘Björn’,
efternamn: ‘Silas
}
}

render() {
avkastning(
<div>
<UserProvider värde={detta.stat.användaren}>
<User />
</UserProvider>
</div>
)
}
}

Leverantören accepterar ett värde prop skickas till den Konsument komponenter ättlingar. I detta fall kommer vi att låta användaren tillstånd att Konsumenten komponenter. Du kan se att vi inte passerar staten att Användaren komponent som rekvisita. Det innebär att vi kan ändra User-komponenten och utesluta rekvisita eftersom den inte behöver dem:

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

Konsumenten

Flera komponenter kan prenumerera på en Leverantör komponent. Våra UserProfile komponent måste använda sig av sammanhanget, så kommer det att prenumerera på det.

const UserProfile = (rekvisita) => (
<UserConsumer>
{context => {
avkastning(
<div>
<h2>Profil-Sida på {sammanhang.username}</h2>
<UserDetails />
</div>
)
}}
</UserConsumer>
)

De data vi injiceras i-Leverantör via värdet prop görs sedan tillgängliga i samband parameter funktion. Vi kan nu använda denna tillgång användarnamnet för den användare som i vår komponent.

Den UserDetails komponent kommer att se ut ungefär så UserProfile komponent eftersom det är abonnent till samma Leverantör:

const UserDetails = () => (
<div>
<UserConsumer>
{context => {
avkastning (
<div>
<p>Userame: {sammanhang.username}</p>
<p>Första Namnet: {sammanhang.förnamn}</p>
<p>efternamn: {sammanhang.efternamn}</p>
</div>
)
}}
</UserConsumer>
</div>
)

Se Pennan Reagera Sammanhang API Pen 2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Uppdatering Av Tillstånd

Vad händer om vi vill tillåta användare att ändra sina första och sista namnet? Det är också möjligt. Konsumenten komponenter kan åter göra när det är förändringar att värdet som skickas av Leverantören komponent. Låt oss se på ett exempel.

Vi har två inmatningsfält för första och sista namnet i konsumenternas komponent. Från Leverantör komponent, kommer vi att ha två metoder för att uppdatera läget för programmet genom att använda de värden som anges i inmatningsfälten. Nog prata, låt kod!

Vår App komponent kommer att se ut så här:

klass App sträcker sig Reagera.Komponent {
state = {
user: {
användarnamn: ‘jioke’,
förnamn: ‘Björn’,
efternamn: ‘Silas
}
}

render() {
avkastning(
<div>
<UserProvider värde={
{
staten: detta.stat.användare
åtgärder: {
handleFirstNameChange: event => {
const värde = evenemanget.- målet.värde
detta.setState(prevState => ({
user: {
…prevState.användare
förnamn: värde
}
}))
},

handleLastNameChange: event => {
const värde = evenemanget.- målet.värde
detta.setState(prevState => ({
user: {
…prevState.användare
efternamn: värde
}
}))
}
}
}
}>
<User />
</UserProvider>
</div>
)
}
}

Vi passerar ett objekt som innehåller tillstånd och åtgärder att värdet rekvisita som Leverantören får. De åtgärder som finns metoder som kommer att utlösas när en onChange-händelsen inträffar. Värdet av händelsen används sedan för att uppdatera läget. Eftersom vi vill uppdatera antingen förnamn eller efternamn, det finns behov av att bevara värdet av den andra. För detta använder vi oss av ES6 Sprida Operatör, vilket gör att vi kan uppdatera värdet för den angivna nyckeln.

Med de nya förändringar, vi behöver uppdatera UserProfile komponent.

const UserProfile = (rekvisita) => (
<UserConsumer>
{({staten}) => {
avkastning(
<div>
<h2>Profil-Sida på {stat.username}</h2>
<UserDetails />
</div>
)
}}
</UserConsumer>
)

Vi använder ES6 omstrukturering av valutan för att extrahera staten från det värde som erhålls från Leverantören.

För UserDetails komponent, vi både staten och åtgärder. Vi måste också lägga till två inmatningsfält som kommer att lyssna för en onChange() händelse och kalla motsvarande metoder.

const UserDetails = () => {
avkastning (
<div>
<UserConsumer>
{({ stat, åtgärder }) => {
avkastning (
<div>
<div>
<p>Userame: {stat.username}</p>
<p>Första Namnet: {stat.förnamn}</p>
<p>efternamn: {stat.efternamn}</p>
</div>
<div>
<div>
<input type=”text” value={stat.förnamn} onChange={åtgärder.handleFirstNameChange} />
</div>
<div>
<input type=”text” value={stat.efternamn} onChange={åtgärder.handleLastNameChange} />
</div>
</div>
</div>
)
}}
</UserConsumer>
</div>
)
}

Med Hjälp Av Standardvärden

Det är möjligt att passera standardvärden vid initiering av Sammanhang. För att göra detta, istället för att passera ett tomt objekt att createContext(), vi kommer att klara vissa uppgifter.

const UserContext = Reagera.createContext({
användarnamn: ‘johndoe’,
förnamn: “John”,
efternamn: ‘Doe’
})

För att använda denna data i vår ansökan träd, har vi att ta bort leverantör från trädet. Så vår App komponent kommer att se ut så här.

klass App sträcker sig Reagera.Komponent {
state = {
user: {
användarnamn: ‘jioke’,
förnamn: ‘Björn’,
efternamn: ‘Silas
}
}

render() {
avkastning(
<div>
<User />
</div>
)
}
}

Se Pennan Reagera Sammanhang API-Penna 4 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

De data som används i Konsument-komponenter kommer att ske definieras när vi initierat ett nytt Sammanhang.

Sammanfattningsvis

När saker och ting bli komplicerade, och du är frestad att köra garn installera [<insert tredje part bibliotek för statlig förvaltning], paus för en sekund — du har fått Reagera Sammanhang redo. Tror du inte mig? Kanske du tror att Kent C. Dodds.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!