Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Kao React ili React Native programer, važno je razumjeti koncept spremnika i prezentacijskih komponenti.

Ovi obrasci dizajna pomažu u pravilnom odvajanju problema. Možete koristiti ovaj koncept kako biste osigurali da strukturirate svoj kod na način koji se lakše održava i skalabilan.

Što su komponente spremnika?

Komponente spremnika, poznate i kao pametne komponente, odgovorne su za upravljanje podacima i logikom u vašoj aplikaciji. Oni se bave zadacima poput dohvaćanja podataka iz API-ja, ažuriranja stanja i obrade korisničkih interakcija.

Za implementaciju ove strukture, možete koristiti knjižnica kao što je React-Redux za povezivanje vaših komponenti s pohranom i prosljeđivanje podataka i radnji vašim podređenim komponentama ili prezentacijskim komponentama.

Što su prezentacijske komponente?

Prezentacijske komponente odgovorne su za prikaz podataka iz svojih roditeljskih komponenti. Često su bez statusa i usredotočeni su na korisničko sučelje i vizualni prikaz podataka.

instagram viewer

Ovo stanje ih čini lakima za manipulaciju i testiranje, čime su zaradili ime glupih komponenti. Glupo stanje prezentacijskih komponenti omogućuje vam da ih ponovno koristite u cijeloj svojoj aplikaciji. Time se izbjegava loš kod koji se ponavlja.

Zašto koristiti spremnik i prezentacijske komponente?

Kratak i jednostavan odgovor na pitanje je: Razdvajanje koncerna. Ovo je ključno načelo u nekoliko paradigmi, uključujući objektno orijentirano, funkcionalno i aspektno orijentirano programiranje. Međutim, mnogi programeri Reacta ignoriraju ove koncepte i odlučuju se napisati kod koji jednostavno funkcionira.

Kod koji samo radi je odličan, dok ne prestane raditi. Loše organiziran kod je teže održavati i ažurirati. To može otežati dodavanje novih značajki ili dovođenje drugih programera da rade na projektu. Rješavanje ovih već stvorenih problema predstavlja opterećenje i bolje ih je spriječiti od samog početka.

Primjena uzorka dizajna spremnika i prezentacijskih komponenti osigurava da svaka komponenta unutar vašeg projekta ima jasan zadatak koji obrađuje. Time se postiže modularna struktura gdje se svaka optimizirana komponenta spaja kako bi dovršila vašu aplikaciju.

Vaše komponente se još uvijek mogu preklapati; podjela dužnosti između spremnika i prezentacijske komponente nije uvijek jasna. Međutim, kao opće pravilo, svoje prezentacijske komponente trebate usmjeriti na vizualne podatke, a komponente spremnika na podatke i logiku.

Kako koristiti spremnik i prezentacijske komponente u React Nativeu

U tipičnoj React Native aplikaciji uobičajeno je stvarati komponente koje sadrže i prezentacijski i logički kod. Možete dohvatiti podatke iz API-ja, upravljati stanjem obrasca i prikazati izlaz, sve u jednoj klasi. Razmislite o jednostavnoj aplikaciji koja će dohvaćanje popisa korisnika iz API-ja i prikazati njihova imena i dob.

To možete učiniti s jednom komponentom, ali to će rezultirati kodom koji je teško čitati, koji se ne može ponovno koristiti i koji je teži za testiranje i održavanje.

Na primjer:

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz { View, Text, FlatList } iz'react-native';
konst Popis korisnika = () => {
konst [korisnici, setKorisnici] = useState([]);


 useEffect(() => {
konst dohvaćanje korisnika = asinkroni () => {
konst odgovor = čekati dohvati (' https://example.com/users');
konst podaci = čekati odgovor.json();
 setUsers (podaci);
 };


 dohvatiKorisnike();
 }, []);


povratak (
 podaci={korisnici}
 keyExtractor={item => item.id}
 renderItem={({ stavka }) => (

Naziv: {item.name}</Text>
Dob: {item.age}</Text>
 </View>
 )}
 />
 );
};
izvozzadano Popis korisnika;

U ovom primjeru, Popis korisnika odgovoran je za upravljanje stanjem polja za unos, dohvaćanje podataka iz API-ja i renderiranje podataka.

Bolji i učinkovitiji način da se ovo implementira je razdvajanje logike u UserList-u na komponente prezentacije i spremnika.

Možete stvoriti a Kontejner popisa korisnika komponenta koja je odgovorna za dohvaćanje i upravljanje korisničkim podacima. Zatim može proslijediti te podatke prezentacijskoj komponenti, Popis korisnika, kao rekvizit.

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
// Komponenta spremnika
konst UserListContainer = () => {
konst [korisnici, setKorisnici] = useState([]);


 useEffect(() => {
konst dohvaćanje korisnika = asinkroni () => {
konst odgovor = čekati dohvati (' https://example.com/users');
konst podaci = čekati odgovor.json();
 setUsers (podaci);
 };


 dohvatiKorisnike();
 }, []);


povratak<Popis korisnikakorisnika={korisnici} />;
};
izvozzadano UserListContainer;

Prezentaciju možete podijeliti između dvije prezentacijske komponente: Korisnik i Popis korisnika. Svaki je odgovoran za jednostavno generiranje oznaka na temelju ulaznih rekvizita koje prima.

uvoz { View, Text, FlatList } iz'react-native';
// Prezentacijska komponenta
konst Korisnik = ({ ime, dob }) => (

Ime: {name}</Text>
Dob: {age}</Text>
 </View>
);
// Prezentacijska komponenta
konst Popis korisnika = ({ korisnici }) => (
 podaci={korisnici}
 keyExtractor={item => item.id}
 renderItem={({ stavka }) => <KorisnikIme={ime proizvoda}dob={item.age} />}
 />
);

Novi kod razdvaja izvornu komponentu u dvije prezentacijske komponente, Korisnik i Popis korisnika, i jednu komponentu spremnika, Kontejner popisa korisnika.

Najbolji primjeri iz prakse za implementaciju spremnika i prezentacijskih komponenti

Kada koristite spremnik i prezentacijske komponente, važno je slijediti neke najbolje prakse kako biste osigurali da komponente rade kako treba.

  1. Svaka komponenta treba imati jasnu i specifičnu ulogu. Komponenta spremnika treba upravljati stanjem, a prezentacijska komponenta treba upravljati vizualnom prezentacijom.
  2. Gdje je moguće, koristite funkcionalne komponente umjesto komponenti klase. Jednostavniji su, lakši za testiranje i pružaju bolje performanse.
  3. Izbjegavajte uključivanje logike ili funkcionalnosti u komponentu koja nije relevantna za njezinu svrhu. To pomaže da komponente ostanu fokusirane i lake za održavanje i testiranje.
  4. Koristite pomoćne elemente za komunikaciju između komponenti, jasno odvajajući probleme i izbjegavajući usko povezane komponente.
  5. Nepotrebna ažuriranja stanja mogu dovesti do problema s izvedbom, stoga je važno ažurirati stanje samo kada je to potrebno.

Slijeđenje ovih najboljih praksi osigurava da vaš spremnik i prezentacijske komponente učinkovito rade zajedno pružiti čisto, organizirano i skalabilno rješenje za upravljanje stanjem i vizualnom prezentacijom u vašoj aplikaciji React Native.

Prednosti korištenja spremnika i prezentacijskih komponenti

Spremnik i prezentacijske komponente mogu pružiti nekoliko prednosti. Oni mogu pomoći u poboljšanju strukture koda, mogućnosti održavanja i skalabilnosti. Oni također rezultiraju boljom suradnjom i delegiranjem zadataka među timovima. Oni čak mogu dovesti do povećanja performansi i optimizacije vaše aplikacije React Native.

Slijedite najbolje prakse za implementaciju ovih komponenti i možete izgraditi bolje i skalabilnije React Native aplikacije.