Bygg inbyggda appar med bättre reaktioner med container- och presentationskomponenter

Som React eller React Native-utvecklare är det viktigt att förstå konceptet med container- och presentationskomponenter.

Dessa designmönster hjälper till med korrekt separation av problem. Du kan använda detta koncept för att säkerställa att du strukturerar din kod på ett mer underhållbart och skalbart sätt.

Vad är containerkomponenter?

Containerkomponenter, även kända som smarta komponenter, ansvarar för att hantera data och logik i din app. De hanterar uppgifter som att hämta data från ett API, uppdatera tillstånd och bearbeta användarinteraktioner.

För att implementera denna struktur kan du använda ett bibliotek som React-Redux för att koppla dina komponenter till butiken och skicka data och åtgärder ner till dina underordnade komponenter eller presentationskomponenter.

Vad är presentationskomponenter?

Presentationskomponenter ansvarar för att visa data från sina överordnade komponenter. De är ofta statslösa och fokuserar på användargränssnittet och den visuella representationen av data.

Detta tillstånd gör dem lätta att manipulera och testa, vilket ger dem namnet dumma komponenter. Presentationskomponenternas dumma tillstånd gör det möjligt för dig att återanvända dem i hela din applikation. Detta undviker usel och repetitiv kod.

Varför använda behållare och presentationskomponenter?

Det korta och enkla svaret på frågan är: Separation of Concerns. Detta är en nyckelprincip i flera paradigm, inklusive objektorienterad, funktionell och aspektorienterad programmering. Men många React-utvecklare tenderar att ignorera dessa koncept och väljer att skriva kod som bara fungerar.

Kod som bara fungerar är bra, tills den slutar fungera. Dåligt organiserad kod är svårare att underhålla och uppdatera. Detta kan göra det svårt att lägga till nya funktioner eller ta in andra programmerare för att arbeta med projektet. Att åtgärda dessa problem när de redan har skapats är en arbetsbörda, och de förebyggs bättre från början.

Genom att tillämpa designmönstret för behållare och presentationskomponenter säkerställs att varje komponent i ditt projekt har en tydlig uppgift som den hanterar. Detta uppnår en modulär struktur där varje optimerad komponent kommer samman för att komplettera din app.

Dina komponenter kan fortfarande överlappa varandra; arbetsfördelningen mellan en container och en presentationskomponent är inte alltid distinkt. Men som en allmän regel bör du fokusera dina presentationskomponenter på visuell data och dina containerkomponenter på data och logik.

Hur man använder behållare och presentationskomponenter i React Native

I en typisk React Native-app är det vanligt att skapa komponenter som innehåller både presentations- och logikrelaterad kod. Du kan hämta data från ett API, hantera tillståndet för ett formulär och visa utdata allt i en klass. Överväg en enkel app som gör det hämta en lista över användare från ett API och visa deras namn och ålder.

Du kan göra detta med en enda komponent, men det kommer att resultera i kod som är svår att läsa, inte återanvändbar och svårare att testa och underhålla.

Till exempel:

importera Reagera, { useState, useEffect } från'reagera';
importera { View, Text, Flat List } från"reagera-native";
konst Användarlista = () => {
konst [users, setUsers] = useState([]);
 useEffect(() => {
konst fetchUsers = asynkron () => {
konst svar = vänta hämta(' https://example.com/users');
konst data = vänta response.json();
 setUsers (data);
 };
 fetchUsers();
 }, []);
lämna tillbaka (
 data={användare}
 keyExtractor={item => item.id}
 renderItem={({ item }) => (

Namn: {item.name}</Text>
Ålder: {item.age}</Text>
 </View>
 )}
 />
 );
};
exporterastandard Användarlista;

I det här exemplet, Användarlista är ansvarig för att hantera tillståndet för ett inmatningsfält, hämta data från ett API och rendera data.

Det bättre och mer effektiva sättet att implementera detta är att dela upp logiken i UserList i presentations- och containerkomponenter.

Du kan skapa en UserListContainer komponent som ansvarar för att hämta och hantera användardata. Den kan sedan skicka dessa data till en presentationskomponent, Användarlista, som rekvisita.

importera Reagera, { useState, useEffect } från'reagera';
// Behållarkomponent
konst UserListContainer = () => {
konst [users, setUsers] = useState([]);
 useEffect(() => {
konst fetchUsers = asynkron () => {
konst svar = vänta hämta(' https://example.com/users');
konst data = vänta response.json();
 setUsers (data);
 };
 fetchUsers();
 }, []);
lämna tillbaka<Användarlistaanvändare={users} />;
};
exporterastandard UserListContainer;

Du kan separera presentationen mellan två presentationskomponenter: Användare och Användarlista. Var och en är ansvarig för att helt enkelt generera markeringar baserat på indata som de får.

importera { View, Text, Flat List } från"reagera-native";
// Presentationskomponent
konst Användare = ({ namn ålder }) => (

Namn: {name}</Text>
Ålder: {age}</Text>
 </View>
);
// Presentationskomponent
konst Användarlista = ({ användare }) => (
 data={användare}
 keyExtractor={item => item.id}
 renderItem={({ item }) => <Användarenamn={föremålsnamn}ålder={item.age} />}
 />
);

Den nya koden separerar den ursprungliga komponenten i två presentationskomponenter, Användare och Användarlista, och en behållarkomponent, UserListContainer.

Bästa praxis för implementering av container- och presentationskomponenter

När du använder behållare och presentationskomponenter är det viktigt att följa några bästa praxis för att säkerställa att komponenterna fungerar som avsett.

1. Varje komponent ska ha en tydlig och specifik roll. Behållarkomponenten ska hantera tillstånd och presentationskomponenten ska hantera visuell presentation.
2. Om möjligt, använd funktionella komponenter istället för klasskomponenter. De är enklare, lättare att testa och ger bättre prestanda.
3. Undvik att inkludera logik eller funktionalitet i en komponent som är irrelevant för dess syfte. Detta hjälper till att hålla komponenterna fokuserade och lätta att underhålla och testa.
4. Använd rekvisita för kommunikation mellan komponenter, separera problem tydligt och undvik tätt sammankopplade komponenter.
5. Onödiga uppdateringar av tillstånd kan leda till prestandaproblem, så det är viktigt att endast uppdatera tillstånd när det behövs.

Att följa dessa bästa praxis säkerställer att din behållare och presentationskomponenter fungerar effektivt tillsammans tillhandahålla en ren, organiserad och skalbar lösning för att hantera tillstånd och visuell presentation i din React Native-app.

Fördelarna med att använda behållare och presentationskomponenter

Container och presentationskomponenter kan ge flera fördelar. De kan hjälpa till att förbättra din kodstruktur, underhållbarhet och skalbarhet. De resulterar också i bättre samarbete och delegering av uppgifter mellan team. De kan till och med leda till ökad prestanda och optimering av din React Native-app.

Följ bästa praxis för att implementera dessa komponenter, så kan du bygga bättre och mer skalbara React Native-appar.