Byg native apps med bedre reaktion med container- og præsentationskomponenter

Som React eller React Native-udvikler er det vigtigt at forstå konceptet med container- og præsentationskomponenter.

Disse designmønstre hjælper med den korrekte adskillelse af bekymringer. Du kan bruge dette koncept til at sikre, at du strukturerer din kode på en mere vedligeholdelsesvenlig og skalerbar måde.

Hvad er containerkomponenter?

Containerkomponenter, også kendt som smarte komponenter, er ansvarlige for at administrere data og logik i din app. De håndterer opgaver som at hente data fra en API, opdatere tilstand og behandle brugerinteraktioner.

For at implementere denne struktur kan du bruge et bibliotek såsom React-Redux at forbinde dine komponenter til butikken og videregive data og handlinger til dine underordnede komponenter eller præsentationskomponenter.

Hvad er præsentationskomponenter?

Præsentationskomponenter er ansvarlige for at vise data fra deres overordnede komponenter. De er ofte statsløse og fokuserer på brugergrænsefladen og den visuelle repræsentation af dataene.

Denne tilstand gør dem nemme at manipulere og teste, hvilket giver dem navnet som dumme komponenter. Den dumme tilstand af præsentationskomponenter gør det muligt for dig at genbruge dem på tværs af hele din applikation. Dette undgår elendig og gentagne kode.

Hvorfor bruge container- og præsentationskomponenter?

Det korte og enkle svar på spørgsmålet er: Adskillelse af bekymringer. Dette er et nøgleprincip i flere paradigmer, herunder objektorienteret, funktionel og aspektorienteret programmering. Imidlertid har mange React-udviklere en tendens til at ignorere disse koncepter og vælge at skrive kode, der bare virker.

Kode, der bare virker, er fantastisk, indtil den holder op med at virke. Dårligt organiseret kode er sværere at vedligeholde og opdatere. Dette kan gøre det vanskeligt at tilføje nye funktioner eller få andre programmører til at arbejde på projektet. Det er en arbejdsbyrde at løse disse problemer, når de først er oprettet, og de er bedre forhindret fra starten.

Anvendelse af container- og præsentationskomponentdesignmønsteret sikrer, at hver komponent i dit projekt har en klar opgave, som den håndterer. Dette opnår en modulær struktur, hvor hver optimeret komponent samles for at fuldende din app.

Dine komponenter kan stadig overlappe hinanden; opgavefordelingen mellem en container og en præsentationskomponent er ikke altid adskilt. Men som en generel regel bør du fokusere dine præsentationskomponenter på visuelle data og dine containerkomponenter på data og logik.

Sådan bruges container- og præsentationskomponenter i React Native

I en typisk React Native-app er det almindeligt at lave komponenter, der indeholder både præsentations- og logikrelateret kode. Du kan hente data fra en API, administrere tilstanden af ​​en formular og vise output alt sammen i én klasse. Overvej en simpel app, der vil hente en liste over brugere fra en API og vise deres navne og alder.

Du kan gøre dette med en enkelt komponent, men det vil resultere i kode, der er svær at læse, ikke genbrugelig og sværere at teste og vedligeholde.

For eksempel:

importere Reager, { useState, useEffect } fra'reagere';
importere { View, Text, Flat List } fra'reager-native';
konst Brugerliste = () => {
konst [brugere, sætBrugere] = useState([]);
 useEffect(() => {
konst fetchUsers = asynkron () => {
konst svar = vente hente(' https://example.com/users');
konst data = vente response.json();
 sætBrugere (data);
 };
 fetchUsers();
 }, []);
Vend tilbage (
 data={brugere}
 keyExtractor={item => item.id}
 renderItem={({ item }) => (

Navn: {item.name}</Text>
Alder: {item.age}</Text>
 </View>
 )}
 />
 );
};
eksportStandard Brugerliste;

I dette eksempel, Brugerliste er ansvarlig for at administrere et inputfelts tilstand, hente data fra en API og gengive dataene.

Den bedre og mere effektive måde at implementere dette på er at adskille logikken i UserList i præsentations- og containerkomponenter.

Du kan oprette en UserListContainer komponent, der er ansvarlig for at hente og administrere brugerdataene. Det kan derefter videregive disse data til en præsentationskomponent, Brugerliste, som en rekvisit.

importere Reager, { useState, useEffect } fra'reagere';
// Beholderkomponent
konst UserListContainer = () => {
konst [brugere, sætBrugere] = useState([]);
 useEffect(() => {
konst fetchUsers = asynkron () => {
konst svar = vente hente(' https://example.com/users');
konst data = vente response.json();
 sætBrugere (data);
 };
 fetchUsers();
 }, []);
Vend tilbage<Brugerlistebrugere={brugere} />;
};
eksportStandard UserListContainer;

Du kan adskille præsentationen mellem to præsentationskomponenter: Bruger og Brugerliste. Hver enkelt er ansvarlig for simpelthen at generere markup baseret på input-rekvisitter, de modtager.

importere { View, Text, Flat List } fra'reager-native';
// Præsentationskomponent
konst Bruger = ({ navn, alder }) => (

Navn: {name}</Text>
Alder: {age}</Text>
 </View>
);
// Præsentationskomponent
konst Brugerliste = ({ brugere }) => (
 data={brugere}
 keyExtractor={item => item.id}
 renderItem={({ item }) => <Brugernavn={tingens navn}alder={item.age} />}
 />
);

Den nye kode adskiller den originale komponent i to præsentationskomponenter, Bruger og Brugerliste, og en beholderkomponent, UserListContainer.

Bedste praksis for implementering af container- og præsentationskomponenter

Når du bruger container- og præsentationskomponenter, er det vigtigt at følge nogle bedste fremgangsmåder for at sikre, at komponenterne fungerer efter hensigten.

1. Hver komponent bør have en klar og specifik rolle. Beholderkomponenten skal håndtere tilstand, og præsentationskomponenten skal håndtere visuel præsentation.
2. Hvor det er muligt, skal du bruge funktionelle komponenter i stedet for klassekomponenter. De er enklere, nemmere at teste og giver bedre ydeevne.
3. Undgå at inkludere logik eller funktionalitet i en komponent, der er irrelevant for dens formål. Dette hjælper med at holde komponenterne fokuserede og nemme at vedligeholde og teste.
4. Brug rekvisitter til kommunikation mellem komponenter, tydelig adskille bekymringer og undgå tæt forbundne komponenter.
5. Unødvendige opdateringer til tilstanden kan føre til ydeevneproblemer, så det er vigtigt kun at opdatere tilstanden, når det er nødvendigt.

At følge disse bedste fremgangsmåder sikrer, at din container og præsentationskomponenter arbejder effektivt sammen leverer en ren, organiseret og skalerbar løsning til styring af tilstand og visuel præsentation i din React Native-app.

Fordelene ved at bruge container- og præsentationskomponenter

Container- og præsentationskomponenter kan give flere fordele. De kan hjælpe med at forbedre din kodestruktur, vedligeholdelse og skalerbarhed. De resulterer også i bedre samarbejde og uddelegering af opgaver mellem teams. De kan endda føre til øget ydeevne og optimering af din React Native-app.

Følg bedste praksis for implementering af disse komponenter, og du kan bygge bedre og mere skalerbare React Native-apps.