Was sind höherwertige Komponenten Reagieren?

0
48

Wenn Sie wurden in das ökosystem Reagieren für eine Weile, gibt es eine Möglichkeit, dass Sie gehört haben, über Höhere Bestellung von Komponenten. Schauen wir uns eine einfache Implementierung und zugleich zu versuchen, zu erklären, die Kern-Idee. Von hier aus sollten Sie eine gute Vorstellung davon bekommen, wie Sie funktionieren und sogar mit Ihnen zu verwenden.

Warum Höherwertige Komponenten?

Wie bauen Sie Reagieren Anwendungen, werden Sie in Situationen, in denen Sie freigeben möchten, die gleiche Funktionalität über mehrere Komponenten.

Zum Beispiel: Sie müssen zu verwalten, den Zustand der momentan angemeldeten Benutzer in Ihrer Anwendung. Statt die Verwaltung, der Staat über alle notwendigen Komponenten, die Staat, Sie konnte erstellen eine übergeordnete Komponente zu trennen, der Benutzer eingeloggt ist-Zustand in eine container-Komponente, dann pass, der Zustand der Komponenten, die Gebrauch machen von es.

Die Komponenten, die vom Staat erhalten, von der höherwertigen Komponente wird die Funktion der Präsentations-Komponenten. Zustand übergeben bekommt und Sie bedingt Rendern von UI, die auf ihm basieren. Sie nicht die Mühe mit der Verwaltung des Staates.

Mal sehen, ein weiteres Beispiel. Sagen wir, Sie haben drei von JSON-Dateien in Ihrer Anwendung. Diese Dateien enthalten verschiedene Daten, die geladen wird, in Ihrer Anwendung in drei verschiedene Komponenten. Sie möchten Ihren Benutzern die Möglichkeit zu suchen, die die geladenen Daten aus diesen Dateien. Sie könnte die Implementierung einer Suchfunktion in allen drei Komponenten. Diese Vervielfältigung kann nicht sein ein Problem auf den ersten, aber, wie Ihre Anwendung wächst und mehr Komponenten, die diese Funktionalität benötigen, die ständige Vervielfältigung wird umständlich und anfällig für Probleme.

Ein besserer Weg ist die Schaffung einer übergeordneten Komponente, behandeln die suchen-Funktion. Mit ihm können Sie wickeln Sie die anderen Komponenten einzeln in Ihre higher-order-Komponente.

Wie Höher -, Um-Komponenten zu Arbeiten?

Reagieren die docs sagen, dass höhere-Ordnung-Komponenten nehmen eine Komponente und die Rückkehr einer Komponente.

Die Nutzung höherwertiger Komponenten, die in handliches kommt, wenn Sie architektonisch bereit für die Trennung von container-Komponenten von darstellungskomponenten. Die Präsentation-Komponente ist oft eine zustandslose funktionale Komponente, welche Requisiten und rendert UI. Eine zustandslose funktionale Komponenten sind Reine JavaScript-Funktionen, die nicht über Staaten. Hier ein Beispiel:

importieren Reagieren von ‘reagieren’

const App = ({name}) => {
return (
<div>
<h2>Dies ist eine funktionale Komponente. Ihr name ist {name}.</h2>
</div>
)
}

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

Die container-Komponente hat die Aufgabe, die Verwaltung des Staates. Der Behälter, in diesem Fall, ist die higher-order-Komponente.

In die Suche Beispiel, das wir vorhin gesprochen haben, die search-Komponente wäre die container-Komponente, verwaltet die Suche Zustand und umschließt die Präsentations-Komponenten, müssen Sie die suchen-Funktion. Die Präsentations-Komponenten, die sonst keine Ahnung haben, der Zustand oder wie es verwaltet wird.

Ein Higher-Order-Komponente Beispiel

Beginnen wir mit einem einfachen Beispiel. Hier ist ein higher-order-Komponente transformiert und zurückgibt Benutzernamen in Großbuchstaben geschrieben werden:

const-hoc – = (WrappedComponent) => (Requisiten) => {
return (
<div>
<WrappedComponent {…props}>
{props.Kinder.toUpperCase()}
</WrappedComponent>
</div>
)
}

Diese übergeordnete Komponente erhält eine WrappedComponent als argument. Dann gibt es neue Komponente mit Requisiten übergeben, um es anlegen zu Reagieren element. Wir rufen Sie .toUpperCase() auf die Requisiten.Kinder, verwandeln die übergebenen Requisiten.Kinder, die in Großbuchstaben um.

Dazu verwenden die höherwertige Komponente, die wir brauchen, um eine Komponente zu erstellen, erhält die Requisiten und die macht der Kinder.

const Username = (Requisiten) => (
<div>{props.Kinder}</div>
)

Als Nächstes wickeln Sie Username mit dem higher-order-Komponente. Wir speichern das in eine variable:

const UpperCaseUsername = hoc(Username)

In unserer App-Komponente, können wir nun nutzen Sie es wie folgt:

const App = () => (
<div>
<UpperCaseUsername>Kingsley</UpperCaseUsername>
</div>
);

Die UpperCaseUsername-Komponente ist lediglich eine Darstellung der Benutzernamen UI, die wiederum zieht in den Staat, aus der WrappedComponent als higher-order-Komponente.

Ein Praktischer Higher-Order-Komponente

Man Stelle sich vor wir möchten, erstellen Sie eine Liste der Standorte mit einem Suchformular, Filter. Das JSON wird in flat-files und geladen als separate Komponenten. Wir beginnen mit dem laden der Daten.

Unsere erste Komponente geladen werden, die Standorte für unsere Nutzer. Werden wir nutzen .anzeigen (), um eine Schleife durch die Daten in JSON-Datei.

importieren Reagieren von ‘reagieren’
// Wo die Daten liegen
import Vorspannung von ‘./Standorte.json’
// Verwaltet die Daten
import LocationCard von ‘./LocationCard’

// Rendert die Darstellung der Daten
const Ort = (Requisiten) => {
return (
<div>
<div>
<div>
<h2>Bevorzugte Standorte</h2>
</div>
</div>
<div>
{preload.Daten
.Karte(Standort => <LocationCard key={location.id} {…Position} />)}
</div>
</div>
)
}
export-Standard-Speicherort

Mit dieser Komponente wird das Rendern der Daten in einem LocationCard Komponente. Ich zog, um eine andere Komponente, um die Dinge klar. Diese Komponente ist eine funktionale Komponente, mit der die Präsentation der Daten. Die Daten (Standort), von der die Datei empfangen wird, über Requisiten, und jeder Ort wird weitergegeben an die LocationCard Komponente.

Jetzt brauchen wir eine zweite Komponente, die schließlich auch benötigen, suchen-Funktion. Es wird sehr ähnlich wie die erste Komponente, die wir gerade gebaut, aber es wird einen anderen Namen haben und laden von Daten von einem anderen Ort aus.

Wir möchten, dass unsere Nutzer in der Lage sein, um die Suche für die Elemente, die mit einem input-Feld. In der Liste der Elemente angezeigt, auf die app sollte bestimmt werden durch den Stand der Suche. Diese Funktionalität wird über die zwei Komponenten, die wir Bearbeiten. Dank der Idee der höheren Ordnung, die Komponenten, können wir eine search-container-Komponente ist und wickeln Sie es um die anderen Komponenten.

Wir nennen die Komponente, withSearch. Diese Komponente gerendert wird das Eingabefeld für die Suche und auch die Verwaltung unserer Suchbegriff Zustand. Der Suchbegriff übergeben werden, die als Requisiten, um die gewickelten Komponente, die verwendet werden zum filtern der Daten gezogen:

importieren Reagieren, { Component } von ‘reagieren’

const withSearch = (WrappedComponent) => {
Rückkehr Klasse extends Component {
state = {
Suchbegriff:”
}
handleSearch = Ereignis => {
diese.setState({ Suchbegriff: event.Ziel.Wert })
}

render() {
return (
<div>
<div>
<input onChange={das.handleSearch} Wert={das.Zustand.Suchbegriff} type=”text” placeholder=”Suche” />
</div>
<WrappedComponent Suchbegriff={das.Zustand.Suchbegriff} />
</div>
)
}
}

}
export Standard-withSearch

Der Suchbegriff ist gegeben, ein Zustand, der einen leeren string. Der eingegebene Wert durch den Benutzer in das Suchfeld abgerufen und verwendet, um den neuen Status für diesen Suchbegriff eingeben. Als Nächstes passieren wir diesen Suchbegriff eingeben, um die WrappedComponent. Wir werden dies nutzen, wenn Sie die Daten filtern.

Gebrauch zu machen, die höherwertige Komponente, die wir brauchen, um einige änderungen an unserem Präsentations-Komponente.

importieren Reagieren, { Component } von ‘reagieren’
// Wo die Daten liegen
import Vorspannung von ‘./Standorte.json’
// Suche der Daten
import withSearch von ‘./withSearch
// Verwaltet die Daten
import LocationCard von ‘./LocationCard’

// Rendert die Darstellung der Daten
const Ort = (Requisiten) => {
const { Suchbegriff } = Requisiten

return (
<div>
<div>
<div>
<h2>Bevorzugte Standorte</h2>
</div>
</div>
<div>
{preload.Daten
// Filter-Standorten durch die mit dem eingegebenen Suchbegriff
.filter(location => `${location.name} ${location.zone} ${location.region}`.toUpperCase().indexOf(Suchbegriff.toUpperCase()) >= 0)
// Schleife durch die Standorte
.Karte(Standort => <LocationCard key={location.id} {…Position} />)}
</div>
</div>
)
}
export Standard-withSearch(Standort)

Das erste, was wir Taten, oben ist das importieren der übergeordneten Komponente. Dann fügen wir eine filter-Methode zum filtern der Daten basierend auf was der Benutzer eingibt in der Suche nach input. Zuletzt, wir brauchen, wickeln Sie es mit der withSearch Komponente.

Finden Sie die Pen-hoc-Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Fazit

Übergeordnete Komponenten müssen nicht beängstigend sein. Nach dem Verständnis der Grundlagen, können Sie das Konzept zur Nutzung von Abstraktion, Weg-Funktionen, können geteilt werden zwischen den verschiedenen Komponenten.

Mehr Ressourcen

  • Höher-Bestellung Von Komponenten – Dokumentation Reagieren
  • Reagieren Höher, Um die Komponenten in der Tiefe – von Fran Guijarro
  • Höhere Ordnung, die Komponenten Reagieren – von Chris Nwamba
  • Weitere Beispiele – Sammlung CodePen