Graben In Kontext Reagieren

0
37

Sie haben sich vielleicht gefragt in letzter Zeit, was all die Summen, um Kontext und was es bedeuten könnte für Sie und Ihre Reagieren-Websites. Vor dem Kontext, wenn die Verwaltung der staatlichen kompliziert über die Funktionalität von setState sind, haben Sie wahrscheinlich hatte, Gebrauch zu machen von einer Drittanbieter-Bibliothek. Dank der jüngsten updates von den genial Reagieren-team, wir haben jetzt Kontext, das helfen könnte mit einigen state-management-Themen.

Was Bedeutet Kontext Lösen?

Wie bewegen Sie den Staat von einer übergeordneten Komponente eine untergeordnete Komponente geschachtelt ist, die in der Komponente Baum? Sie wissen, dass Sie verwenden können, Redux Status verwalten, aber Sie sollten nicht haben zu springen, um wiedermal in jeder situation.

Es gibt einen Weg, dies zu tun, ohne Redux oder irgendeine andere Dritte Partei-Staat-management-tool. Sie können Requisiten!

Sagen, die Funktion, die Sie umsetzen wollen, hat eine Struktur ähnlich dem, was ich unter:

Der Staat lebt in die App-Komponente und ist erforderlich, UserProfile und UserDetails Komponenten. Du musst es über Requisiten unten in der Struktur. Wenn die Komponenten, die diesem Zustand sind bis zu 10 Stufen tief, kann dies ermüdend, ermüdend und fehleranfällig. Jede Komponente soll wie eine black-box — weitere Komponenten, sollten Sie nicht bewusst sein, die besagt, dass Sie nicht brauchen. Hier ist ein Beispiel für eine Anwendung, entspricht dem oben beschriebenen Szenario.

Klasse App erweitert Reagieren.Komponente {
state = {
Benutzer: {
Benutzername: ‘jioke’,
Vorname: ‘Kingsley’,
lastName: ‘Silas’
}
}

render() {
return(
<div>
<User user={das.Zustand.user} />
</div>
)
}
}

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

const UserProfile = (Requisiten) => (
<div>
<h2>Profil von {props.username}</h2>
<UserDetails {…props} />
</div>
)

const UserDetails = (Requisiten) => (
<div>
<p>Benutzername: {props.username}</p>
<p>Vorname: {props.firstName}</p>
<p>Nachname: {props.lastName}</p>
</div>
)

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

Wir passieren den Staat von einer Komponente zur anderen mit Requisiten. Die Benutzer-Komponente hat keine Notwendigkeit des Staates, aber es hat, um es zu empfangen über Requisiten, um es zu bekommen, den Baum hinunter. Das ist genau das, was wir vermeiden wollen.

Finden Sie den Stift Reagieren die Kontext-API-Stift 1 durch Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Kontext ist die Rettung!

Reagieren die Kontext-API ermöglicht Ihnen das speichern der Zustand, in dem, was aussieht, wie eine Anwendung global state und greifen Sie nur in die Komponenten, die Sie benötigen, ohne zu bohren es nach unten über Requisiten.

Wir beginnen mit der Initialisierung eines neuen Kontexts mit Reagieren ist createContext()

const UserContext = Reagieren.createContext({})
const UserProvider = UserContext.Anbieter
const UserConsumer = UserContext.Verbraucher

Dieser neue Kontext zugewiesen ist, um eine const-variable, in diesem Fall, wird die variable UserContext. Sie können sehen, dass es keine Notwendigkeit zu installieren, eine Bibliothek, createContext() ist verfügbar, in zu Reagieren (16.3.0 und oben).

Die Provider-Komponente stellt den Kontext zur Verfügung, um Komponenten, die es brauchen, die sogenannten Abonnenten. In anderen Worten, der Provider-Komponente ermöglicht es dem Verbraucher zu abonnieren, ändert sich im Kontext. Denken Sie daran, dass der Kontext ist ähnlich zu einem globalen Zustand der Anwendung. Also Komponenten, die keine Verbraucher sind, werden keine abonniert auf den Kontext.

Wenn Sie Codierung sind lokal, Ihre Kontext-Datei wie folgt Aussehen wird:

import { createContext } von ‘reagieren’

const UserContext = createContext({})
export const UserProvider = UserContext.Anbieter
export const UserConsumer = UserContext.Verbraucher

Der Anbieter

Wir nutzen die Anbieter in unserer Eltern-Komponente, wo wir unseren Staat.

Klasse App erweitert Reagieren.Komponente {
state = {
Benutzer: {
Benutzername: ‘jioke’,
Vorname: ‘Kingsley’,
lastName: ‘Silas’
}
}

render() {
return(
<div>
<UserProvider value={das.Zustand.user}>
<User />
</UserProvider>
</div>
)
}
}

Der Anbieter übernimmt einen Wert prop an Sie übergeben werden Consumer-Komponenten Nachkommen. In diesem Fall, wir werden an den Benutzer-Status des Consumer-Komponenten. Sie können sehen, dass wir nicht durch den Staat, um Benutzer-Komponente als Requisiten. Das bedeutet, dass wir Bearbeiten können die User-Komponente und schließt die Requisiten, da Sie nicht brauchen Sie:

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

Der Verbraucher

Mehrere Komponenten können abonnieren Sie eine Provider-Komponente. Unsere UserProfile – Komponente muss nutzen den Kontext, so wird es zu abonnieren.

const UserProfile = (Requisiten) => (
<UserConsumer>
{Kontext => {
return(
<div>
<h2>Profil von {context.username}</h2>
<UserDetails />
</div>
)
}}
</UserConsumer>
)

Die Daten, die wir injiziert der Anbieter über den Wert prop dann in den context-parameter der Funktion. Wir können nun diese Zugriff auf den Benutzernamen des Benutzers ein, in unsere Komponente.

Die UserDetails Komponente wird ähnlich Aussehen wie die UserProfile – Komponente, da ist es Abonnenten für den gleichen Anbieter:

const UserDetails = () => (
<div>
<UserConsumer>
{Kontext => {
return (
<div>
<p>Userame: {Kontext.username}</p>
<p>Vorname: {Kontext.firstName}</p>
<p>Nachname: {Kontext.lastName}</p>
</div>
)
}}
</UserConsumer>
</div>
)

Finden Sie den Stift Reagieren die Kontext-API-Stift 2 durch Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Aktualisierung Stand

Was ist, wenn wir zulassen möchten, dass Benutzer zum ändern Ihrer ersten und letzten Namen? Das ist auch möglich. Verbraucher können die Komponenten neu Rendern, wenn es änderungen an den übergebenen Wert von der Provider-Komponente. Mal sehen, ein Beispiel.

Wir haben zwei input-Felder für den ersten und letzten Namen in der consumer-Komponente. Aus der Provider-Komponente ist, haben wir zwei Methoden, die update-Stand der Anwendung, über die Eingabe der Werte in die Eingabefelder ein. Genug geredet, let ‘ s code!

Unsere App-Komponente wird wie folgt Aussehen:

Klasse App erweitert Reagieren.Komponente {
state = {
Benutzer: {
Benutzername: ‘jioke’,
Vorname: ‘Kingsley’,
lastName: ‘Silas’
}
}

render() {
return(
<div>
<UserProvider value={
{
Zustand: diese.Zustand.Benutzer,
Aktionen: {
handleFirstNameChange: event => {
const value = event.Ziel.Wert
diese.setState(prevState => ({
Benutzer: {
…prevState.Benutzer,
Vorname: Wert
}
}))
},

handleLastNameChange: event => {
const value = event.Ziel.Wert
diese.setState(prevState => ({
Benutzer: {
…prevState.Benutzer,
Nachname: Wert
}
}))
}
}
}
}>
<User />
</UserProvider>
</div>
)
}
}

Übergeben wir ein Objekt, das den Status enthält, und Aktionen, um den Wert Requisiten, die der Provider erhält. Die Aktionen sind Methoden, die ausgelöst wird, wenn ein onChange-Ereignis passiert. Der Wert des Events wird dann benutzt zum aktualisieren des Staates. Da wir möchten, aktualisieren Sie entweder den vor-oder Nachnamen, es gibt eine Notwendigkeit zur Erhaltung der Wert der anderen. Für diese nutzen wir ES6 Spread-Operator, die es uns ermöglicht, aktualisieren Sie den Wert des angegebenen Schlüssels.

Mit den neuen änderungen, die wir brauchen, zu aktualisieren UserProfile – Komponente.

const UserProfile = (Requisiten) => (
<UserConsumer>
{({Status}) => {
return(
<div>
<h2>Profil von {Zustand.username}</h2>
<UserDetails />
</div>
)
}}
</UserConsumer>
)

Wir verwenden ES6 destructuring zu extrahieren Staat aus den empfangenen Wert aus dem Anbieter.

Für die UserDetails Komponente, wir beide, der Staat und Aktionen. Wir müssen auch noch zwei input-Felder, die zu hören für ein onChange () – Ereignis und rufen Sie die entsprechenden Methoden.

const UserDetails = () => {
return (
<div>
<UserConsumer>
{({ Zustand, Aktionen }) => {
return (
<div>
<div>
<p>Userame: {Zustand.username}</p>
<p>Vorname: {Zustand.firstName}</p>
<p>Nachname: {Zustand.lastName}</p>
</div>
<div>
<div>
<input type=”text” value={Zustand.firstName} onChange={Aktionen.handleFirstNameChange} />
</div>
<div>
<input type=”text” value={Zustand.lastName} onChange={Aktionen.handleLastNameChange} />
</div>
</div>
</div>
)
}}
</UserConsumer>
</div>
)
}

Verwendung Von Default-Werten

Es ist möglich, pass Standard-Werte während der Initialisierung Kontext. Um dies zu tun, statt der übergabe ein leeres Objekt zu createContext(), geben wir einige Daten.

const UserContext = Reagieren.createContext({
Benutzername: ‘johndoe’,
firstName: ‘max’,
Nachname: ‘Mustermann’
})

Zum verwenden dieser Daten in unserer Anwendung Baum, wir haben den provider entfernen aus dem Baum. Also unsere App-Komponente wird wie folgt Aussehen.

Klasse App erweitert Reagieren.Komponente {
state = {
Benutzer: {
Benutzername: ‘jioke’,
Vorname: ‘Kingsley’,
lastName: ‘Silas’
}
}

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

Finden Sie den Stift Reagieren die Kontext-API-Stift 4 von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Die Daten, die verwendet werden in den Consumer-Komponenten erledigt wird definiert, wenn wir initialisiert einen neuen Kontext.

Abschließend

Wenn die Dinge kompliziert werden, und Sie sind versucht zu laufen, Garn installieren [<einfügen von Drittanbieter-Bibliothek für die Staatliche Verwaltung], pause für eine Sekunde — hast du Reagiert Kontext bereit. Nicht Sie glauben Sie mir? Vielleicht wirst du glauben, Kent C. Dodds.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!