Als Entwickler von React oder React Native ist es wichtig, das Konzept von Container- und Präsentationskomponenten zu verstehen.
Diese Entwurfsmuster helfen bei der richtigen Trennung von Bedenken. Sie können dieses Konzept verwenden, um sicherzustellen, dass Sie Ihren Code wartbarer und skalierbarer strukturieren.
Was sind Containerkomponenten?
Containerkomponenten, auch Smart Components genannt, sind für die Verwaltung von Daten und Logik in Ihrer App verantwortlich. Sie erledigen Aufgaben wie das Abrufen von Daten aus einer API, das Aktualisieren des Status und das Verarbeiten von Benutzerinteraktionen.
Um diese Struktur zu implementieren, können Sie verwenden eine Bibliothek wie React-Redux um Ihre Komponenten mit dem Geschäft zu verbinden und Daten und Aktionen an Ihre untergeordneten Komponenten oder Präsentationskomponenten weiterzugeben.
Was sind Präsentationskomponenten?
Präsentationskomponenten sind für die Anzeige von Daten aus ihren übergeordneten Komponenten verantwortlich. Sie sind oft zustandslos und konzentrieren sich auf die Benutzeroberfläche und die visuelle Darstellung der Daten.
Dieser Zustand macht sie leicht zu manipulieren und zu testen, was ihnen den Namen dumme Komponenten einbringt. Der dumme Zustand von Präsentationskomponenten ermöglicht es Ihnen, sie in Ihrer gesamten Anwendung wiederzuverwenden. Dies vermeidet miesen und sich wiederholenden Code.
Warum Container- und Präsentationskomponenten verwenden?
Die kurze und einfache Antwort auf die Frage lautet: Separation of Concerns. Dies ist ein Schlüsselprinzip in mehreren Paradigmen, einschließlich objektorientierter, funktionaler und aspektorientierter Programmierung. Viele React-Entwickler neigen jedoch dazu, diese Konzepte zu ignorieren und sich dafür zu entscheiden, Code zu schreiben, der einfach funktioniert.
Code, der einfach funktioniert, ist großartig, bis er nicht mehr funktioniert. Schlecht organisierter Code ist schwieriger zu pflegen und zu aktualisieren. Dies kann es schwierig machen, neue Funktionen hinzuzufügen oder andere Programmierer mit der Arbeit an dem Projekt zu beauftragen. Das Beheben dieser Probleme, sobald sie bereits entstanden sind, ist eine Arbeitsbelastung, und sie werden besser von Anfang an verhindert.
Die Anwendung des Entwurfsmusters für Container- und Präsentationskomponenten stellt sicher, dass jede Komponente in Ihrem Projekt eine klare Aufgabe hat, die sie übernimmt. Dadurch wird eine modulare Struktur erreicht, bei der jede optimierte Komponente zusammenkommt, um Ihre App zu vervollständigen.
Ihre Komponenten können sich immer noch überlappen; Die Aufgabenteilung zwischen einem Behälter und einem Präsentationselement ist nicht immer eindeutig. Als allgemeine Regel sollten Sie Ihre Präsentationskomponenten jedoch auf visuelle Daten und Ihre Containerkomponenten auf Daten und Logik konzentrieren.
So verwenden Sie Container- und Präsentationskomponenten in React Native
In einer typischen React Native-App ist es üblich, Komponenten zu erstellen, die sowohl präsentationsbezogenen als auch logikbezogenen Code enthalten. Sie können Daten von einer API abrufen, den Status eines Formulars verwalten und die Ausgabe in einer Klasse anzeigen. Betrachten Sie eine einfache App, die das kann Rufen Sie eine Liste von Benutzern von einer API ab und ihre Namen und ihr Alter anzeigen.
Sie können dies mit einer einzigen Komponente tun, aber es führt zu Code, der schwer lesbar, nicht wiederverwendbar und schwieriger zu testen und zu warten ist.
Zum Beispiel:
importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren { Ansicht, Text, FlatList } aus'reaktionsnativ';konst Benutzerliste = () => {
konst [Benutzer, setUsers] = useState([]);useEffect(() => {
konst fetchUsers = asynchron () => {
konst Antwort = erwarten bringen(' https://example.com/users');
konst Daten = erwarten Antwort.json();
setUsers (Daten);
};Benutzer abrufen ();
}, []);zurückkehren (
data={Benutzer}
keyExtractor={item => item.id}
renderItem = {({ Artikel }) => (Name: {Artikel.Name}</Text> Alter: {Artikel.Alter}</Text>
</View>
)}
/>
);
};
ExportStandard Benutzerliste;
In diesem Beispiel Benutzerliste ist für die Verwaltung des Zustands eines Eingabefelds, das Abrufen von Daten aus einer API und das Rendern der Daten verantwortlich.
Der bessere und effizientere Weg, dies zu implementieren, besteht darin, die Logik in UserList in Präsentations- und Containerkomponenten zu trennen.
Sie können eine erstellen UserListContainer Komponente, die für das Abrufen und Verwalten der Benutzerdaten verantwortlich ist. Es kann diese Daten dann an eine Präsentationskomponente weitergeben, Benutzerliste, als Requisite.
importieren Reagieren, { useState, useEffect } aus'reagieren';// Containerkomponente
konst UserListContainer = () => {
konst [Benutzer, setUsers] = useState([]);useEffect(() => {
konst fetchUsers = asynchron () => {
konst Antwort = erwarten bringen(' https://example.com/users');
konst Daten = erwarten Antwort.json();
setUsers (Daten);
};Benutzer abrufen ();
}, []);zurückkehren<BenutzerlisteBenutzer={Benutzer} />;
};
ExportStandard UserListContainer;
Sie können die Präsentation in zwei Präsentationskomponenten aufteilen: Benutzer Und Benutzerliste. Jeder ist dafür verantwortlich, einfach Markup auf der Grundlage der erhaltenen Eingabe-Requisiten zu generieren.
importieren { Ansicht, Text, FlatList } aus'reaktionsnativ';// Präsentationskomponente
konst Benutzer = ({ name Alter }) => (Name: {Name}</Text> Alter: {Alter}</Text>
</View>
);
// Präsentationskomponente
konst Benutzerliste = ({ Benutzer }) => (
data={Benutzer}
keyExtractor={item => item.id}
renderItem={({Element}) => <BenutzerName={Artikelname}Alter={Artikel.Alter} />}
/>
);
Der neue Code trennt die ursprüngliche Komponente in zwei Präsentationskomponenten, Benutzer Und Benutzerliste, und eine Containerkomponente, UserListContainer.
Best Practices für die Implementierung von Container- und Präsentationskomponenten
Wenn Sie Container- und Präsentationskomponenten verwenden, ist es wichtig, einige Best Practices zu befolgen, um sicherzustellen, dass die Komponenten wie vorgesehen funktionieren.
- Jede Komponente sollte eine klare und spezifische Rolle haben. Die Containerkomponente sollte den Zustand verwalten und die Präsentationskomponente sollte die visuelle Präsentation handhaben.
- Verwenden Sie nach Möglichkeit funktionale Komponenten anstelle von Klassenkomponenten. Sie sind einfacher, leichter zu testen und bieten eine bessere Leistung.
- Vermeiden Sie es, Logik oder Funktionalität in eine Komponente aufzunehmen, die für ihren Zweck irrelevant ist. Dies trägt dazu bei, dass die Komponenten fokussiert und einfach zu warten und zu testen sind.
- Verwenden Sie Requisiten für die Kommunikation zwischen Komponenten, trennen Sie Bedenken klar und vermeiden Sie eng gekoppelte Komponenten.
- Unnötige Statusaktualisierungen können zu Leistungsproblemen führen, daher ist es wichtig, den Status nur bei Bedarf zu aktualisieren.
Das Befolgen dieser Best Practices stellt sicher, dass Ihre Container- und Präsentationskomponenten effektiv zusammenarbeiten Bieten Sie eine saubere, organisierte und skalierbare Lösung für die Verwaltung des Zustands und der visuellen Präsentation in Ihrer React Native-App.
Die Vorteile der Verwendung von Container- und Präsentationskomponenten
Container- und Präsentationskomponenten können mehrere Vorteile bieten. Sie können dabei helfen, Ihre Codestruktur, Wartbarkeit und Skalierbarkeit zu verbessern. Sie führen auch zu einer besseren Zusammenarbeit und Delegation von Aufgaben zwischen Teams. Sie können sogar zu einer Leistungssteigerung und Optimierung Ihrer React Native App führen.
Befolgen Sie Best Practices für die Implementierung dieser Komponenten, und Sie können bessere und skalierbarere React Native-Apps erstellen.
