Als React- of React Native-ontwikkelaar is het belangrijk om het concept van container- en presentatiecomponenten te begrijpen.
Deze ontwerppatronen helpen bij de juiste scheiding van zorgen. U kunt dit concept gebruiken om ervoor te zorgen dat u uw code op een meer onderhoudbare en schaalbare manier structureert.
Wat zijn containercomponenten?
Containercomponenten, ook wel slimme componenten genoemd, zijn verantwoordelijk voor het beheer van gegevens en logica in uw app. Ze voeren taken uit zoals het ophalen van gegevens van een API, het bijwerken van de status en het verwerken van gebruikersinteracties.
Om deze structuur te implementeren, kunt u gebruiken een bibliotheek zoals React-Redux om uw componenten met de winkel te verbinden en gegevens en acties door te geven aan uw onderliggende componenten of presentatiecomponenten.
Wat zijn presentatiecomponenten?
Presentatiecomponenten zijn verantwoordelijk voor het weergeven van gegevens van hun bovenliggende componenten. Ze zijn vaak stateless en richten zich op de gebruikersinterface en de visuele weergave van de gegevens.
Deze toestand maakt ze gemakkelijk te manipuleren en te testen, waardoor ze de naam van domme componenten verdienen. De domme staat van presentatiecomponenten maakt het voor u mogelijk om ze in uw hele applicatie te hergebruiken. Dit voorkomt waardeloze en repetitieve code.
Waarom container- en presentatiecomponenten gebruiken?
Het korte en simpele antwoord op de vraag is: Scheiding van Zorgen. Dit is een sleutelprincipe in verschillende paradigma's, waaronder objectgeoriënteerd, functioneel en aspectgeoriënteerd programmeren. Veel React-ontwikkelaars negeren deze concepten echter en kiezen ervoor om code te schrijven die gewoon werkt.
Code die gewoon werkt, is geweldig, totdat hij niet meer werkt. Slecht georganiseerde code is moeilijker te onderhouden en bij te werken. Dit kan het lastig maken om nieuwe functies toe te voegen of andere programmeurs aan het project te laten werken. Het oplossen van deze problemen nadat ze al zijn gemaakt, is een werklast en ze kunnen vanaf het begin beter worden voorkomen.
Door het ontwerppatroon van de container- en presentatiecomponenten toe te passen, zorgt u ervoor dat elk onderdeel binnen uw project een duidelijke taak heeft die het afhandelt. Dit zorgt voor een modulaire structuur waarin elk geoptimaliseerd onderdeel samenkomt om uw app compleet te maken.
Uw componenten kunnen elkaar nog steeds overlappen; de taakverdeling tussen een container en een presentatiecomponent is niet altijd duidelijk. Als algemene regel geldt echter dat u uw presentatiecomponenten moet richten op visuele gegevens en uw containercomponenten op gegevens en logica.
Container- en presentatiecomponenten gebruiken in React Native
In een typische React Native-app is het gebruikelijk om componenten te maken die zowel presentatie- als logica-gerelateerde code bevatten. U kunt gegevens ophalen van een API, de status van een formulier beheren en uitvoer allemaal in één klasse weergeven. Overweeg een eenvoudige app die dat wel doet een lijst met gebruikers ophalen uit een API en tonen hun naam en leeftijd.
U kunt dit doen met een enkele component, maar het zal resulteren in code die moeilijk te lezen, niet herbruikbaar en moeilijker te testen en te onderhouden is.
Bijvoorbeeld:
importeren Reageren, { useState, useEffect } van'Reageer';
importeren { Weergeven, Tekst, FlatList } van'reageren-native';const Gebruikerslijst = () => {
const [gebruikers, setUsers] = useState([]);gebruikEffect(() => {
const gebruikers ophalen = asynchroon () => {
const reactie = wachten ophalen(' https://example.com/users');
const gegevens = wachten reactie.json();
setGebruikers (gegevens);
};gebruikers ophalen();
}, []);opbrengst (
gegevens={gebruikers}
keyExtractor={item => item.id}
renderItem={({ item }) => (Naam: {item.name}</Text> Leeftijd: {item.age}</Text>
</View>
)}
/>
);
};
exporterenstandaard Gebruikers lijst;
In dit voorbeeld Gebruikers lijst is verantwoordelijk voor het beheer van de status van een invoerveld, het ophalen van gegevens uit een API en het weergeven van de gegevens.
De betere en efficiëntere manier om dit te implementeren, is door de logica in UserList te scheiden in presentatie- en containercomponenten.
U kunt een GebruikersLijstContainer component die verantwoordelijk is voor het ophalen en beheren van de gebruikersgegevens. Het kan deze gegevens vervolgens doorgeven aan een presentatiecomponent, Gebruikers lijst, als prop.
importeren Reageren, { useState, useEffect } van'Reageer';// Containercomponent
const GebruikersLijstContainer = () => {
const [gebruikers, setUsers] = useState([]);gebruikEffect(() => {
const gebruikers ophalen = asynchroon () => {
const reactie = wachten ophalen(' https://example.com/users');
const gegevens = wachten reactie.json();
setGebruikers (gegevens);
};gebruikers ophalen();
}, []);opbrengst<Gebruikers lijstgebruikers={gebruikers} />;
};
exporterenstandaard GebruikersLijstContainer;
U kunt de presentatie opsplitsen in twee presentatiecomponenten: Gebruiker En Gebruikers lijst. Elk is verantwoordelijk voor het eenvoudig genereren van markeringen op basis van input-props die ze ontvangen.
importeren { Weergeven, Tekst, FlatList } van'reageren-native';// Presentatiecomponent
const Gebruiker = ({ naam leeftijd }) => (Naam: {naam}</Text> Leeftijd: {leeftijd}</Text>
</View>
);
// Presentatiecomponent
const Gebruikerslijst = ({ gebruikers }) => (
gegevens={gebruikers}
keyExtractor={item => item.id}
renderItem={({ item }) => <Gebruikernaam={Itemnaam}leeftijd={item.leeftijd} />}
/>
);
De nieuwe code scheidt de originele component in twee presentatiecomponenten, Gebruiker En Gebruikers lijst, en één containercomponent, GebruikersLijstContainer.
Best practices voor het implementeren van container- en presentatiecomponenten
Wanneer u container- en presentatiecomponenten gebruikt, is het belangrijk om enkele best practices te volgen om ervoor te zorgen dat de componenten werken zoals bedoeld.
- Elk onderdeel moet een duidelijke en specifieke rol hebben. De containercomponent moet de status beheren en de presentatiecomponent moet de visuele presentatie afhandelen.
- Gebruik waar mogelijk functionele componenten in plaats van klassecomponenten. Ze zijn eenvoudiger, gemakkelijker te testen en bieden betere prestaties.
- Vermijd het opnemen van logica of functionaliteit in een component die niet relevant is voor het doel ervan. Dit helpt componenten gefocust te houden en eenvoudig te onderhouden en te testen.
- Gebruik rekwisieten voor communicatie tussen componenten, waarbij zorgen duidelijk worden gescheiden en strak gekoppelde componenten worden vermeden.
- Onnodige updates van de status kunnen leiden tot prestatieproblemen, dus het is belangrijk om de status alleen bij te werken wanneer dat nodig is.
Door deze best practices te volgen, zorgt u ervoor dat uw container- en presentatiecomponenten effectief samenwerken een schone, georganiseerde en schaalbare oplossing bieden voor het beheren van status en visuele presentatie in uw React Native-app.
De voordelen van het gebruik van container- en presentatiecomponenten
Container- en presentatiecomponenten kunnen verschillende voordelen bieden. Ze kunnen helpen bij het verbeteren van uw codestructuur, onderhoudbaarheid en schaalbaarheid. Ze resulteren ook in een betere samenwerking en taakdelegatie tussen teams. Ze kunnen zelfs leiden tot betere prestaties en optimalisatie van uw React Native-app.
Volg best practices voor het implementeren van deze componenten en u kunt betere en meer schaalbare React Native-apps bouwen.
