Kā React vai React Native izstrādātājam ir svarīgi saprast konteinera un prezentācijas komponentu jēdzienu.
Šie dizaina modeļi palīdz pareizi nošķirt problēmas. Varat izmantot šo koncepciju, lai nodrošinātu koda strukturēšanu labāk uzturējamā un mērogojamākā veidā.
Kas ir konteinera sastāvdaļas?
Konteinera komponenti, kas pazīstami arī kā viedie komponenti, ir atbildīgi par datu un loģikas pārvaldību jūsu lietotnē. Viņi veic tādus uzdevumus kā datu iegūšana no API, stāvokļa atjaunināšana un lietotāju mijiedarbības apstrāde.
Lai īstenotu šo struktūru, varat izmantot bibliotēka, piemēram, React-Redux lai savienotu savus komponentus ar veikalu un nodotu datus un darbības saviem bērnu komponentiem vai prezentācijas komponentiem.
Kas ir prezentācijas komponenti?
Prezentācijas komponenti ir atbildīgi par to vecāku komponentu datu attēlošanu. Tie bieži ir bezvalstnieki un koncentrējas uz lietotāja interfeisu un datu vizuālo attēlojumu.
Šis stāvoklis padara tos viegli manipulējamus un pārbaudāmus, izpelnoties tiem mēmu komponentu nosaukumu. Prezentācijas komponentu muļķīgais stāvoklis ļauj tos atkārtoti izmantot visā lietojumprogrammā. Tas ļauj izvairīties no draņķīga un atkārtota koda.
Kāpēc izmantot konteineru un prezentācijas komponentus?
Īsā un vienkāršā atbilde uz jautājumu ir: Nošķirt bažas. Tas ir galvenais princips vairākās paradigmās, tostarp objektorientētā, funkcionālā un aspektorientētā programmēšanā. Tomēr daudzi React izstrādātāji mēdz ignorēt šos jēdzienus un izvēlas rakstīt kodu, kas vienkārši darbojas.
Kods, kas vienkārši darbojas, ir lielisks, līdz tas pārstāj darboties. Slikti sakārtotu kodu ir grūtāk uzturēt un atjaunināt. Tas var apgrūtināt jaunu funkciju pievienošanu vai citu programmētāju piesaisti darbam pie projekta. Šo problēmu novēršana, kad tās jau ir izveidotas, ir liela slodze, un tās ir labāk novērst jau pašā sākumā.
Konteinera un prezentācijas komponentu dizaina modeļa izmantošana nodrošina, ka katram jūsu projekta komponentam ir skaidrs uzdevums, ar kuru tas tiek galā. Tādējādi tiek iegūta modulāra struktūra, kurā katrs optimizētais komponents tiek apvienots, lai pabeigtu jūsu lietotni.
Jūsu komponenti joprojām var pārklāties; pienākumu sadalījums starp konteineru un prezentācijas komponentu ne vienmēr ir atšķirīgs. Tomēr parasti prezentācijas komponenti ir jākoncentrē uz vizuālajiem datiem, bet konteinera komponenti – uz datiem un loģiku.
Kā lietot React Native konteineru un prezentācijas komponentus
Tipiskā React Native lietotnē parasti tiek izveidoti komponenti, kas satur gan prezentācijas, gan ar loģiku saistītu kodu. Varat iegūt datus no API, pārvaldīt veidlapas stāvokli un parādīt izvadi vienā klasē. Apsveriet vienkāršu lietotni, kas to darīs ielādēt lietotāju sarakstu no API un parādīt viņu vārdus un vecumu.
To var izdarīt, izmantojot vienu komponentu, taču tā rezultātā kods būs grūti nolasāms, nav atkārtoti lietojams un grūtāk pārbaudāms un uzturējams.
Piemēram:
imports Reaģēt, { useState, useEffect } no'reaģēt';
imports { View, Text, FlatList } no'react-native';konst Lietotāju saraksts = () => {
konst [lietotāji, setUsers] = useState([]);useEffect(() => {
konst fetchUsers = asinhrons () => {
konst atbilde = gaidīt atnest(' https://example.com/users');
konst dati = gaidīt response.json();
setUsers (dati);
};fetchUsers();
}, []);atgriezties (
dati={lietotāji}
keyExtractor={item => item.id}
renderItem={({ vienums }) => (Nosaukums: {item.name}</Text> Vecums: {item.age}</Text>
</View>
)}
/>
);
};
eksportētnoklusējuma Lietotāju saraksts;
Šajā piemērā Lietotāju saraksts ir atbildīgs par ievades lauka stāvokļa pārvaldību, datu iegūšanu no API un datu renderēšanu.
Labāks un efektīvāks veids, kā to ieviest, ir UserList loģikas nodalīšana prezentācijas un konteinera komponentos.
Jūs varat izveidot a UserListContainer komponents, kas ir atbildīgs par lietotāja datu iegūšanu un pārvaldību. Pēc tam tas var nodot šos datus prezentācijas komponentam, Lietotāju saraksts, kā butaforija.
imports Reaģēt, { useState, useEffect } no'reaģēt';// Konteinera sastāvdaļa
konst UserListContainer = () => {
konst [lietotāji, setUsers] = useState([]);useEffect(() => {
konst fetchUsers = asinhrons () => {
konst atbilde = gaidīt atnest(' https://example.com/users');
konst dati = gaidīt response.json();
setUsers (dati);
};fetchUsers();
}, []);atgriezties<Lietotāju sarakstslietotājiem={lietotāji} />;
};
eksportētnoklusējuma UserListContainer;
Varat atdalīt prezentāciju starp diviem prezentācijas komponentiem: Lietotājs un Lietotāju saraksts. Katrs ir atbildīgs par vienkāršu marķējuma ģenerēšanu, pamatojoties uz saņemtajiem ievades rekvizītiem.
imports { View, Text, FlatList } no'react-native';// Prezentācijas komponents
konst Lietotājs = ({vārds, vecums}) => (Vārds: {name}</Text> Vecums: {age}</Text>
</View>
);
// Prezentācijas komponents
konst Lietotāju saraksts = ({lietotāji}) => (
dati={lietotāji}
keyExtractor={item => item.id}
renderItem={({ vienums }) => <Lietotājsnosaukums={priekšmeta nosaukums}vecums={item.age} />}
/>
);
Jaunais kods sadala sākotnējo komponentu divos prezentācijas komponentos, Lietotājs un Lietotāju sarakstsun viena konteinera sastāvdaļa, UserListContainer.
Paraugprakse konteineru un prezentācijas komponentu ieviešanai
Izmantojot konteineru un prezentācijas komponentus, ir svarīgi ievērot dažus paraugprakses ieteikumus, lai nodrošinātu, ka komponenti darbojas, kā paredzēts.
- Katram komponentam ir jābūt skaidrai un konkrētai lomai. Konteinera komponentam ir jāpārvalda stāvoklis, un prezentācijas komponentam ir jāpārvalda vizuālā prezentācija.
- Ja iespējams, klases komponentu vietā izmantojiet funkcionālos komponentus. Tie ir vienkāršāki, vieglāk pārbaudāmi un nodrošina labāku veiktspēju.
- Neiekļaujiet loģiku vai funkcionalitāti komponentā, kas nav saistīts ar tā mērķi. Tas palīdz saglabāt komponentus koncentrētus un viegli uzturēt un pārbaudīt.
- Izmantojiet balstus saziņai starp komponentiem, skaidri nodalot problēmas un izvairoties no cieši savienotām sastāvdaļām.
- Nevajadzīgi statusa atjauninājumi var izraisīt veiktspējas problēmas, tāpēc ir svarīgi atjaunināt stāvokli tikai tad, kad tas ir nepieciešams.
Šīs paraugprakses ievērošana nodrošina, ka konteinera un prezentācijas komponenti efektīvi darbojas kopā Nodrošiniet tīru, sakārtotu un mērogojamu risinājumu statusa un vizuālās prezentācijas pārvaldībai savā React Native lietotnē.
Konteinera un prezentācijas komponentu izmantošanas priekšrocības
Konteineri un prezentācijas komponenti var nodrošināt vairākas priekšrocības. Tie var palīdzēt uzlabot jūsu koda struktūru, apkopi un mērogojamību. Tie arī nodrošina labāku sadarbību un uzdevumu deleģēšanu starp komandām. Tie pat var palielināt jūsu React Native lietotnes veiktspēju un optimizāciju.
Ievērojiet šo komponentu ieviešanas paraugpraksi, un varat izveidot labākas un mērogojamākas React Native lietotnes.
