Graven In Reageren Context

0
29

Mogelijk hebt u de laatste tijd afgevraagd wat de buzz over de Context en wat het kan betekenen voor u en uw Reageren sites. Voordat Context, wanneer het management van state wordt ingewikkeld naast de functionaliteit van setState, u had waarschijnlijk om gebruik te maken van een derde partij bibliotheek. Dankzij de recente updates door de geweldige Reageren team, we hebben nu de situatie die zou kunnen helpen met een bepaalde state management vraagstukken.

Wat Doet Context Op Te Lossen?

Hoe verplaats je de staat van een ouder onderdeel van een kind component die is genest in de component boom? U weet dat u kunt gebruiken Redux voor het beheren van state, maar je moet niet te springen om Redux in elke situatie.

Is er een manier om dit te doen zonder Redux of enige andere derde partij state management tool. U kunt gebruik maken van rekwisieten!

Zeggen dat de functie die u wilt implementeren van een boom structuur die lijkt op wat ik heb hieronder:

De staat leeft in de App component en is nodig in UserProfile en UserDetails onderdelen. U nodig hebt om het door te geven via rekwisieten uit de boom. Als de onderdelen die nodig deze staat zijn 10 stappen diep, dit kan saai, vermoeiend en foutgevoelig. Elk onderdeel wordt verondersteld te worden als een black box — andere componenten moeten niet op de hoogte van de staten die ze niet nodig hebben. Hier is een voorbeeld van een toepassing die overeenkomt met het scenario hierboven.

klasse App breidt Reageren.Onderdeel {
staat = {
gebruiker: {
gebruikersnaam: ‘jioke’,
voornaam: ‘Kingsley’,
achternaam: ‘Silas’
}
}

render() {
return(
<div>
<Gebruiker={dit.staat.gebruiker} />
</div>
)
}
}

const Gebruiker = (rekwisieten) => (
<div>
<UserProfile {…props.gebruiker} />
</div>
)

const UserProfile = (rekwisieten) => (
<div>
<h2>Profiel Pagina van {rekwisieten.gebruikersnaam}</h2>
<UserDetails {…props} />
</div>
)

const UserDetails = (rekwisieten) => (
<div>
<p>Gebruikersnaam: {rekwisieten.gebruikersnaam}</p>
<p>voornaam: {rekwisieten.voornaam}</p>
<p>achternaam: {rekwisieten.achternaam}</p>
</div>
)

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

We zijn het passeren van de staat van de ene component naar de andere met behulp van rekwisieten. De Gebruiker component heeft geen behoefte aan de staat, maar het is te ontvangen via rekwisieten om het te krijgen uit de boom. Dit is precies wat we willen vermijden.

Zie de Pen Reageren Context API Pen 1 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

De Context van de Redding!

Reageren Context-API kunt u het opslaan van de staat in wat lijkt op een toepassing global state en toegang tot het alleen in de onderdelen die ze nodig hebben, zonder te hoeven boren naar beneden via rekwisieten.

We beginnen met het initialiseren van een nieuwe Context met behulp van Reageren is createContext()

const UserContext = Reageren.createContext({})
const UserProvider = UserContext.Aanbieder
const UserConsumer = UserContext.Consument

Deze nieuwe Context is toegewezen aan een const variabele, in dit geval de variabele is UserContext. Je kunt zien dat er is geen behoefte om te installeren van een bibliotheek nu createContext() is beschikbaar in Reageren (16.3.0 en boven).

De Aanbieder component maakt de context beschikbaar voor componenten die dat nodig hebben, die geroepen zijn Abonnees. In andere woorden, de Provider component maakt het mogelijk voor Consumenten om u te abonneren op veranderingen in de context. Vergeet niet dat de context is vergelijkbaar met een global application state. Dus, onderdelen die niet zijn Consumenten niet worden ingeschreven om de context.

Als u het coderen van lokaal, uw context bestand zal er als volgt uitzien:

importeren { createContext } van ‘reageren’

const UserContext = createContext({})
export const UserProvider = UserContext.Aanbieder
export const UserConsumer = UserContext.Consument

De Aanbieder

We maken gebruik van de Provider in onze ouder-component, waar wij onze staat.

klasse App breidt Reageren.Onderdeel {
staat = {
gebruiker: {
gebruikersnaam: ‘jioke’,
voornaam: ‘Kingsley’,
achternaam: ‘Silas’
}
}

render() {
return(
<div>
<UserProvider waarde={dit.staat.gebruiker}>
<Gebruiker />
</UserProvider>
</div>
)
}
}

De Aanbieder accepteert een waarde prop te worden doorgegeven aan de Consument componenten nakomelingen. In dit geval, we zullen het doorgeven van de status van de gebruiker om de Consument componenten. U kunt zien dat wij niet het passeren van de staat om de Gebruiker component als rekwisieten. Dat betekent dat we kunnen bewerken door de Gebruiker onderdeel uit te sluiten en de rekwisieten, omdat het hen niet nodig:

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

De Consument

Meerdere onderdelen kunnen zich abonneren voor één Aanbieder component. Onze UserProfile onderdeel moet gebruik maken van de context, dus het zal abonneren.

const UserProfile = (rekwisieten) => (
<UserConsumer>
{context => {
return(
<div>
<h2>Profiel Pagina van {context.gebruikersnaam}</h2>
<UserDetails />
</div>
)
}}
</UserConsumer>
)

De gegevens die we geïnjecteerd in de Aanbieder via de waarde prop is vervolgens beschikbaar gemaakt in het kader van de parameter van de functie. We kunnen nu gebruik maken van deze toegang de gebruikersnaam van de gebruiker die in onze component.

De UserDetails onderdeel zal uitzien in de UserProfile component omdat het abonnement van dezelfde Provider:

const UserDetails = () => (
<div>
<UserConsumer>
{context => {
return (
<div>
<p>Userame: {context.gebruikersnaam}</p>
<p>voornaam: {context.voornaam}</p>
<p>achternaam: {context.achternaam}</p>
</div>
)
}}
</UserConsumer>
</div>
)

Zie de Pen Reageren Context API Pen 2 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Bijwerken Staat

Wat als we gebruikers wilt toestaan om hun eerste en laatste naam? Ook dat is mogelijk. Consumenten kunnen de componenten opnieuw renderen wanneer er veranderingen in de waarde die wordt doorgegeven door de Aanbieder van het component. Laten we een voorbeeld bekijken.

We hebben twee invoervelden voor de eerste en de laatste naam in de consumenten-onderdeel. Van de Aanbieder component, we hebben twee methoden voor het bijwerken van de status van de toepassing met behulp van de waarden ingevuld in de velden. Genoeg gepraat, laten we de code!

Onze App component zal er als volgt uitzien:

klasse App breidt Reageren.Onderdeel {
staat = {
gebruiker: {
gebruikersnaam: ‘jioke’,
voornaam: ‘Kingsley’,
achternaam: ‘Silas’
}
}

render() {
return(
<div>
<UserProvider waarde={
{
staat: dit.staat.gebruiker
acties: {
handleFirstNameChange: event => {
const value = gebeurtenis.doel.waarde
deze.setState(prevState => ({
gebruiker: {
…prevState.gebruiker
voornaam: waarde
}
}))
},

handleLastNameChange: event => {
const value = gebeurtenis.doel.waarde
deze.setState(prevState => ({
gebruiker: {
…prevState.gebruiker
achternaam: waarde
}
}))
}
}
}
}>
<Gebruiker />
</UserProvider>
</div>
)
}
}

We zijn het passeren van een object waarin staat en acties om de waarde rekwisieten die de Aanbieder ontvangt. De acties zijn methoden die zullen worden geactiveerd wanneer een onChange-gebeurtenis plaatsvindt. De waarde van de gebeurtenis wordt dan gebruikt voor het bijwerken van de staat. Omdat we willen bijwerken van zowel de voor-of achternaam, er is een noodzaak van het behoud van de waarde van de andere. Hiervoor maken we gebruik van de ES6 Verspreid Operator, die ons in staat stelt om de update van de waarde van de bepaalde toets.

Met de nieuwe veranderingen die we nodig hebben om de update UserProfile component.

const UserProfile = (rekwisieten) => (
<UserConsumer>
{({state}) => {
return(
<div>
<h2>Profiel Pagina van {staat.gebruikersnaam}</h2>
<UserDetails />
</div>
)
}}
</UserConsumer>
)

Wij maken gebruik van ES6 destructuring uitpakken de staat van de waarde van het ontvangen van de Provider.

Voor de UserDetails component, die we zowel in de staat en acties. We moeten ook nog twee invoer velden die zullen luisteren naar een gebeurtenis onChange() en de bijbehorende methoden.

const UserDetails = () => {
return (
<div>
<UserConsumer>
{({ staat, acties }) => {
return (
<div>
<div>
<p>Userame: {staat.gebruikersnaam}</p>
<p>voornaam: {staat.voornaam}</p>
<p>achternaam: {staat.achternaam}</p>
</div>
<div>
<div>
<input type=”text” value={staat.voornaam} onChange={acties.handleFirstNameChange} />
</div>
<div>
<input type=”text” value={staat.achternaam} onChange={acties.handleLastNameChange} />
</div>
</div>
</div>
)
}}
</UserConsumer>
</div>
)
}

Met Behulp Van Standaard Waarden

Het is mogelijk om de standaard waarden tijdens het initialiseren van de Context. Om dit te doen, in plaats van het passeren van een leeg object te createContext(), passeren we een aantal gegevens.

const UserContext = Reageren.createContext({
gebruikersnaam: ‘johndoe’,
voornaam: ‘John’,
achternaam: ‘Doe’
})

Om gebruik te maken van deze gegevens in onze applicatie boom, hebben we verwijderen van de aanbieder van de boom. Dus onze App component zal uitzien.

klasse App breidt Reageren.Onderdeel {
staat = {
gebruiker: {
gebruikersnaam: ‘jioke’,
voornaam: ‘Kingsley’,
achternaam: ‘Silas’
}
}

render() {
return(
<div>
<Gebruiker />
</div>
)
}
}

Zie de Pen Reageren Context API Pen 4 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

De gegevens die worden gebruikt in de Consumenten-onderdelen zal gedaan worden gedefinieerd als we geïnitialiseerd een nieuwe Context.

In Conclusie

Als de dingen ingewikkeld, en je komt in de verleiding om te draaien garen installeren [<invoegen bibliotheek van derden inzake beheer], te onderbreken voor een tweede heb je Reageren Context in de aanslag. Niet dat u mij geloven? Misschien wil je wel geloven Kent C. Dodds.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!