Erstellen Sie besser reagierende native Apps mit Container- und Präsentationskomponenten
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 eine Bibliothek wie React-Redux verwenden, um Ihre Komponenten mit dem Store 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. Stellen Sie sich eine einfache App vor, die eine Liste von Benutzern von einer API abruft und ihre Namen und ihr Alter anzeigt.
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:
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View>
<Text>Name: {item.name}</Text>
<Text>Age: {item.age}</Text>
</View>
)}
/>
);
};
export default UserList;
In diesem Beispiel ist UserList 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 UserListContainer- Komponente erstellen, die für das Abrufen und Verwalten der Benutzerdaten verantwortlich ist. Es kann diese Daten dann als Requisite an eine Präsentationskomponente, UserList , übergeben.
import React, { useState, useEffect } from 'react';
// Container Component
const UserListContainer = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return <UserList users={users} />;
};
export default UserListContainer;
Sie können die Präsentation zwischen zwei Präsentationskomponenten aufteilen: User und UserList . Jeder ist dafür verantwortlich, einfach Markup auf der Grundlage der erhaltenen Eingabe-Requisiten zu generieren.
import { View, Text, FlatList } from 'react-native';
// Presentational Component
const User = ({ name, age }) => (
<View>
<Text>Name: {name}</Text>
<Text>Age: {age}</Text>
</View>
);
// Presentational Component
const UserList = ({ users }) => (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => <User name={item.name} age={item.age} />}
/>
);
Der neue Code trennt die ursprüngliche Komponente in zwei Präsentationskomponenten, User und UserList , 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.
Die Befolgung dieser Best Practices stellt sicher, dass Ihre Container- und Präsentationskomponenten effektiv zusammenarbeiten, um eine saubere, organisierte und skalierbare Lösung für die Verwaltung des Status und der visuellen Präsentation in Ihrer React Native-App bereitzustellen.
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.
Schreibe einen Kommentar