Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Kot razvijalec React ali React Native je pomembno razumeti koncept vsebnika in predstavitvenih komponent.

Ti vzorci oblikovanja pomagajo pri pravilnem ločevanju skrbi. Ta koncept lahko uporabite, da zagotovite, da strukturirate svojo kodo na bolj vzdržljiv in razširljiv način.

Kaj so komponente vsebnika?

Komponente vsebnika, znane tudi kot pametne komponente, so odgovorne za upravljanje podatkov in logike v vaši aplikaciji. Ukvarjajo se z nalogami, kot je pridobivanje podatkov iz API-ja, posodabljanje stanja in obdelava uporabniških interakcij.

Za izvedbo te strukture lahko uporabite knjižnico, kot je React-Redux za povezavo vaših komponent s shrambo ter posredovanje podatkov in dejanj navzdol vašim podrejenim komponentam ali predstavitvenim komponentam.

Kaj so predstavitvene komponente?

Predstavitvene komponente so odgovorne za prikaz podatkov iz svojih nadrejenih komponent. Pogosto so brez stanja in se osredotočajo na uporabniški vmesnik in vizualno predstavitev podatkov.

instagram viewer

Zaradi tega stanja je z njimi enostavno manipulirati in jih testirati, zaradi česar so si prislužili ime neumne komponente. Neumno stanje predstavitvenih komponent vam omogoča, da jih ponovno uporabite v celotni aplikaciji. S tem se izognemo zanič in ponavljajoči se kodi.

Zakaj uporabljati kontejnerske in predstavitvene komponente?

Kratek in preprost odgovor na vprašanje je: Ločitev skrbi. To je ključno načelo v več paradigmah, vključno z objektno usmerjenim, funkcionalnim in aspektno usmerjenim programiranjem. Vendar mnogi razvijalci React te koncepte ignorirajo in se odločijo napisati kodo, ki preprosto deluje.

Koda, ki preprosto deluje, je odlična, dokler ne preneha delovati. Slabo organizirano kodo je težje vzdrževati in posodabljati. Zaradi tega je lahko težko dodati nove funkcije ali vključiti druge programerje, da delajo na projektu. Odpravljanje teh težav, ko so že ustvarjene, je delovna obremenitev, zato jih je bolje preprečiti takoj.

Uporaba vzorca oblikovanja vsebnika in predstavitvenih komponent zagotavlja, da ima vsaka komponenta v vašem projektu jasno nalogo, ki jo obravnava. To doseže modularno strukturo, kjer se vsaka optimizirana komponenta združi, da dokonča vašo aplikacijo.

Vaše komponente se lahko še vedno prekrivajo; delitev nalog med vsebnikom in predstavitveno komponento ni vedno jasna. Splošno pravilo pa je, da morate predstavitvene komponente osredotočiti na vizualne podatke, vsebniške komponente pa na podatke in logiko.

Kako uporabljati vsebnik in predstavitvene komponente v React Native

V tipični aplikaciji React Native je običajno ustvariti komponente, ki vsebujejo predstavitveno in z logiko povezano kodo. Lahko pridobite podatke iz API-ja, upravljate stanje obrazca in prikažete izhodne podatke, vse v enem razredu. Razmislite o preprosti aplikaciji, ki bo pridobite seznam uporabnikov iz API-ja in prikažejo njihova imena in starost.

To lahko storite z eno samo komponento, vendar bo to povzročilo kodo, ki jo je težko brati, je ni mogoče ponovno uporabiti in jo je težje testirati in vzdrževati.

Na primer:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz {Pogled, besedilo, ravni seznam} od'react-native';
konst Uporabniški seznam = () => {
konst [uporabniki, setUsers] = useState([]);


 useEffect(() => {
konst fetchUsers = asinh () => {
konst odgovor = čakati prinesi (' https://example.com/users');
konst podatki = čakati odziv.json();
 setUsers (podatki);
 };


 fetchUsers();
 }, []);


vrnitev (
 podatki={uporabniki}
 keyExtractor={item => item.id}
 renderItem={({ element }) => (

Ime: {item.name}</Text>
Starost: {item.age}</Text>
 </View>
 )}
 />
 );
};
izvozprivzeto Seznam uporabnikov;

V tem primeru Uporabniški seznam je odgovoren za upravljanje stanja vnosnega polja, pridobivanje podatkov iz API-ja in upodabljanje podatkov.

Boljši in učinkovitejši način za izvedbo tega je ločitev logike v UserList na komponente predstavitve in vsebnika.

Ustvarite lahko a UserListContainer komponento, ki je odgovorna za pridobivanje in upravljanje uporabniških podatkov. Nato lahko te podatke posreduje predstavitveni komponenti, Uporabniški seznam, kot rekvizit.

uvoz Odziv, {useState, useEffect} od'reagirati';
// Komponenta vsebnika
konst UserListContainer = () => {
konst [uporabniki, setUsers] = useState([]);


 useEffect(() => {
konst fetchUsers = asinh () => {
konst odgovor = čakati prinesi (' https://example.com/users');
konst podatki = čakati odziv.json();
 setUsers (podatki);
 };


 fetchUsers();
 }, []);


vrnitev<Uporabniški seznamuporabniki={uporabniki} />;
};
izvozprivzeto UserListContainer;

Predstavitev lahko ločite med dve predstavitveni komponenti: Uporabnik in Uporabniški seznam. Vsak je odgovoren za preprosto ustvarjanje oznak na podlagi vnosnih rekvizitov, ki jih prejme.

uvoz {Pogled, besedilo, ravni seznam} od'react-native';
// Predstavitvena komponenta
konst Uporabnik = ({ ime, starost }) => (

Ime: {name}</Text>
Starost: {age}</Text>
 </View>
);
// Predstavitvena komponenta
konst Uporabniški seznam = ({ uporabniki }) => (
 podatki={uporabniki}
 keyExtractor={item => item.id}
 renderItem={({ element }) => <Uporabnikime={ime izdelka}starost={item.age} />}
 />
);

Nova koda loči izvirno komponento na dve predstavitveni komponenti, Uporabnik in Uporabniški seznamin ena komponenta vsebnika, UserListContainer.

Najboljše prakse za implementacijo vsebnikov in predstavitvenih komponent

Ko uporabljate vsebnik in predstavitvene komponente, je pomembno, da upoštevate nekaj najboljših praks, da zagotovite, da komponente delujejo, kot je predvideno.

  1. Vsaka komponenta mora imeti jasno in specifično vlogo. Komponenta vsebnika mora upravljati stanje, predstavitvena komponenta pa vizualno predstavitev.
  2. Kjer je mogoče, uporabite funkcionalne komponente namesto komponent razreda. So enostavnejši, lažji za testiranje in zagotavljajo boljše delovanje.
  3. Izogibajte se vključevanju logike ali funkcionalnosti v komponento, ki ni pomembna za njen namen. To pomaga ohranjati osredotočenost komponent in jih je enostavno vzdrževati in testirati.
  4. Uporabite pripomočke za komunikacijo med komponentami, jasno ločite pomisleke in se izogibajte tesno povezanim komponentam.
  5. Nepotrebne posodobitve stanja lahko povzročijo težave z zmogljivostjo, zato je pomembno, da stanje posodobite le, kadar je to potrebno.

Upoštevanje teh najboljših praks zagotavlja, da vsebnik in predstavitvene komponente učinkovito delujejo skupaj zagotoviti čisto, organizirano in razširljivo rešitev za upravljanje stanja in vizualne predstavitve v vaši aplikaciji React Native.

Prednosti uporabe vsebnikov in predstavitvenih komponent

Vsebnik in predstavitvene komponente lahko nudijo številne prednosti. Lahko vam pomagajo izboljšati strukturo vaše kode, vzdržljivost in razširljivost. Rezultat so tudi boljše sodelovanje in delegiranje nalog med ekipami. Privedejo lahko celo do povečane zmogljivosti in optimizacije vaše aplikacije React Native.

Sledite najboljšim praksam za implementacijo teh komponent in zgradite lahko boljše in bolj razširljive aplikacije React Native.