Som en React eller React Native-utvikler er det viktig å forstå konseptet med beholder- og presentasjonskomponenter.
Disse designmønstrene hjelper med riktig separasjon av bekymringer. Du kan bruke dette konseptet for å sikre at du strukturerer koden din på en mer vedlikeholdbar og skalerbar måte.
Hva er beholderkomponenter?
Containerkomponenter, også kjent som smarte komponenter, er ansvarlige for å administrere data og logikk i appen din. De håndterer oppgaver som å hente data fra en API, oppdatere tilstand og behandle brukerinteraksjoner.
For å implementere denne strukturen kan du bruke et bibliotek som React-Redux å koble komponentene dine til butikken og sende data og handlinger ned til underordnede komponenter eller presentasjonskomponenter.
Hva er presentasjonskomponenter?
Presentasjonskomponenter er ansvarlige for å vise data fra overordnede komponenter. De er ofte statsløse og fokuserer på brukergrensesnittet og den visuelle representasjonen av dataene.
Denne tilstanden gjør dem enkle å manipulere og teste, og gir dem navnet dumme komponenter. Den dumme tilstanden til presentasjonskomponenter gjør det mulig for deg å gjenbruke dem på tvers av hele programmet. Dette unngår elendig og repeterende kode.
Hvorfor bruke container- og presentasjonskomponenter?
Det korte og enkle svaret på spørsmålet er: Separasjon av bekymringer. Dette er et nøkkelprinsipp i flere paradigmer, inkludert objektorientert, funksjonell og aspektorientert programmering. Imidlertid har mange React-utviklere en tendens til å ignorere disse konseptene og velge å skrive kode som bare fungerer.
Kode som bare fungerer er flott, helt til den slutter å virke. Dårlig organisert kode er vanskeligere å vedlikeholde og oppdatere. Dette kan gjøre det vanskelig å legge til nye funksjoner eller få inn andre programmerere for å jobbe med prosjektet. Å fikse disse problemene når de allerede er opprettet er en arbeidsbelastning, og de er bedre forhindret fra starten.
Ved å bruke designmønsteret for beholder og presentasjonskomponenter sikrer du at hver komponent i prosjektet ditt har en klar oppgave den håndterer. Dette oppnår en modulær struktur der hver optimaliserte komponent kommer sammen for å fullføre appen din.
Komponentene dine kan fortsatt overlappe hverandre; oppgavefordelingen mellom en beholder og en presentasjonskomponent er ikke alltid distinkt. Men som en generell regel bør du fokusere presentasjonskomponentene dine på visuelle data, og containerkomponentene dine på data og logikk.
Hvordan bruke container- og presentasjonskomponenter i React Native
I en typisk React Native-app er det vanlig å lage komponenter som inneholder både presentasjons- og logikkrelatert kode. Du kan hente data fra et API, administrere tilstanden til et skjema og vise utdata i én klasse. Vurder en enkel app som vil hente en liste over brukere fra et API og vise navn og alder.
Du kan gjøre dette med en enkelt komponent, men det vil resultere i kode som er vanskelig å lese, ikke gjenbrukbar og vanskeligere å teste og vedlikeholde.
For eksempel:
import Reager, { useState, useEffect } fra'reagere';
import { View, Text, Flat List } fra'reager-innfødt';konst Brukerliste = () => {
konst [brukere, settBrukere] = brukState([]);useEffect(() => {
konst fetchUsers = asynkron () => {
konst svar = avvente hente(' https://example.com/users');
konst data = avvente response.json();
setUsers (data);
};fetchUsers();
}, []);komme tilbake (
data={brukere}
keyExtractor={item => item.id}
renderItem={({ item }) => (Navn: {item.name}</Text> Alder: {item.age}</Text>
</View>
)}
/>
);
};
eksportmisligholde Brukerliste;
I dette eksemplet, Brukerliste er ansvarlig for å administrere tilstanden til et inndatafelt, hente data fra en API og gjengi dataene.
Den bedre og mer effektive måten å implementere dette på er å skille logikken i UserList i presentasjons- og containerkomponenter.
Du kan lage en UserListContainer komponent som er ansvarlig for å hente og administrere brukerdataene. Den kan deretter sende disse dataene til en presentasjonskomponent, Brukerliste, som rekvisitt.
import Reager, { useState, useEffect } fra'reagere';// Beholderkomponent
konst UserListContainer = () => {
konst [brukere, settBrukere] = brukState([]);useEffect(() => {
konst fetchUsers = asynkron () => {
konst svar = avvente hente(' https://example.com/users');
konst data = avvente response.json();
setUsers (data);
};fetchUsers();
}, []);komme tilbake<Brukerlistebrukere={brukere} />;
};
eksportmisligholde UserListContainer;
Du kan skille presentasjonen mellom to presentasjonskomponenter: Bruker og Brukerliste. Hver enkelt er ansvarlig for ganske enkelt å generere markup basert på input-rekvisitter de mottar.
import { View, Text, Flat List } fra'reager-innfødt';// Presentasjonskomponent
konst Bruker = ({ navn Alder }) => (Navn: {name}</Text> Alder: {age}</Text>
</View>
);
// Presentasjonskomponent
konst Brukerliste = ({ brukere }) => (
data={brukere}
keyExtractor={item => item.id}
renderItem={({ item }) => <BrukerNavn={gjenstandsnavn}alder={item.age} />}
/>
);
Den nye koden deler den opprinnelige komponenten i to presentasjonskomponenter, Bruker og Brukerliste, og en beholderkomponent, UserListContainer.
Beste praksis for implementering av container- og presentasjonskomponenter
Når du bruker beholder- og presentasjonskomponenter, er det viktig å følge noen beste fremgangsmåter for å sikre at komponentene fungerer etter hensikten.
- Hver komponent bør ha en klar og spesifikk rolle. Beholderkomponenten skal håndtere tilstand og presentasjonskomponenten skal håndtere visuell presentasjon.
- Der det er mulig, bruk funksjonelle komponenter i stedet for klassekomponenter. De er enklere, lettere å teste og gir bedre ytelse.
- Unngå å inkludere logikk eller funksjonalitet i en komponent som er irrelevant for formålet. Dette bidrar til å holde komponentene fokuserte og enkle å vedlikeholde og teste.
- Bruk rekvisitter for kommunikasjon mellom komponenter, tydelig skille bekymringer og unngå tett sammenkoblede komponenter.
- Unødvendige oppdateringer til tilstanden kan føre til ytelsesproblemer, så det er viktig å bare oppdatere tilstanden når det er nødvendig.
Å følge disse beste fremgangsmåtene sikrer at beholderen og presentasjonskomponentene fungerer effektivt sammen gi en ren, organisert og skalerbar løsning for å administrere tilstand og visuell presentasjon i React Native-appen din.
Fordelene ved å bruke container- og presentasjonskomponenter
Beholder- og presentasjonskomponenter kan gi flere fordeler. De kan bidra til å forbedre kodestrukturen, vedlikeholdsevnen og skalerbarheten. De resulterer også i bedre samarbeid og delegering av oppgaver mellom team. De kan til og med føre til økt ytelse og optimalisering av React Native-appen din.
Følg beste praksis for implementering av disse komponentene, og du kan bygge bedre og mer skalerbare React Native-apper.
