Reacti või React Native arendajana on oluline mõista konteineri ja esitluskomponentide kontseptsiooni.
Need kujundusmustrid aitavad probleeme õigesti eraldada. Selle kontseptsiooni abil saate tagada, et struktureerite oma koodi paremini hooldataval ja skaleeritavamal viisil.
Mis on konteineri komponendid?
Konteinerkomponendid, mida tuntakse ka nutikate komponentidena, vastutavad teie rakenduse andmete ja loogika haldamise eest. Nad tegelevad selliste ülesannetega nagu andmete toomine API-st, oleku värskendamine ja kasutaja interaktsioonide töötlemine.
Selle struktuuri rakendamiseks võite kasutada raamatukogu, näiteks React-Redux et ühendada oma komponendid poega ning edastada andmed ja toimingud alla oma alamkomponentidele või esitluskomponentidele.
Mis on esitluskomponendid?
Esitluskomponendid vastutavad oma põhikomponentide andmete kuvamise eest. Need on sageli olekuta ja keskenduvad kasutajaliidesele ja andmete visuaalsele esitusele.
See olek muudab neid hõlpsasti manipuleeritavaks ja testitavaks, pälvides neile lollide komponentide nime. Esitluskomponentide loll olek võimaldab teil neid kogu rakenduses uuesti kasutada. See väldib halba ja korduvat koodi.
Miks kasutada konteineri- ja esitluskomponente?
Lühike ja lihtne vastus küsimusele on: Murede lahusus. See on põhiprintsiip mitmes paradigmas, sealhulgas objektorienteeritud, funktsionaalses ja aspektidele orienteeritud programmeerimises. Kuid paljud Reacti arendajad kipuvad neid kontseptsioone ignoreerima ja valivad koodi, mis lihtsalt töötab.
Kood, mis lihtsalt töötab, on suurepärane, kuni see lakkab töötamast. Halvasti organiseeritud koodi on raskem hooldada ja värskendada. See võib muuta uute funktsioonide lisamise või teiste programmeerijate kaasamise projekti kallal töötama keeruliseks. Nende probleemide lahendamine, kui need on juba loodud, on töökoormus ja neid on parem vältida algusest peale.
Konteineri ja esitluskomponentide kujundusmustri rakendamine tagab, et igal teie projekti komponendil on selge ülesanne, millega see tegeleb. See saavutab modulaarse struktuuri, kus iga optimeeritud komponent ühendatakse teie rakenduse lõpuleviimiseks.
Teie komponendid võivad siiski kattuda; ülesannete jaotus konteineri ja esitluskomponendi vahel ei ole alati selge. Üldreeglina peaksite siiski keskenduma oma esitluskomponendid visuaalsetele andmetele ja konteineri komponendid andmetele ja loogikale.
Konteiner- ja esitluskomponentide kasutamine rakenduses React Native
Tüüpilises React Native'i rakenduses on tavaline luua komponente, mis sisaldavad nii esitlust kui ka loogikaga seotud koodi. Võite hankida andmeid API-st, hallata vormi olekut ja kuvada väljundit ühes klassis. Mõelge lihtsale rakendusele, mis seda teeb hankige API-st kasutajate loend ja kuvage nende nimi ja vanus.
Saate seda teha ühe komponendiga, kuid tulemuseks on kood, mida on raske lugeda, mis ei ole korduvkasutatav ning mida on raskem testida ja hooldada.
Näiteks:
importida Reageerida, { useState, useEffect } alates'reageeri';
importida { Vaade, tekst, FlatList } alates'react-native';konst Kasutajaloend = () => {
konst [kasutajad, setKasutajad] = useState([]);useEffect(() => {
konst fetchUsers = asünkr () => {
konst vastus = ootama tõmba(' https://example.com/users');
konst andmed = ootama vastus.json();
setUsers (andmed);
};fetchUsers();
}, []);tagasi (
andmed={kasutajad}
keyExtractor={item => item.id}
renderItem={({ item }) => (Nimi: {item.name}</Text> Vanus: {item.age}</Text>
</View>
)}
/>
);
};
eksportidavaikimisi Kasutajaloend;
Selles näites Kasutajaloend vastutab sisendvälja oleku haldamise, API-st andmete toomise ja andmete renderdamise eest.
Parem ja tõhusam viis selle rakendamiseks on eraldada UserListi loogika esitlus- ja konteinerikomponentideks.
Saate luua a UserListContainer komponent, mis vastutab kasutajaandmete toomise ja haldamise eest. Seejärel saab see edastada need andmed esitluskomponendile, Kasutajaloend, rekvisiidina.
importida Reageerida, { useState, useEffect } alates'reageeri';// Konteineri komponent
konst UserListContainer = () => {
konst [kasutajad, setKasutajad] = useState([]);useEffect(() => {
konst fetchUsers = asünkr () => {
konst vastus = ootama tõmba(' https://example.com/users');
konst andmed = ootama vastus.json();
setUsers (andmed);
};fetchUsers();
}, []);tagasi<Kasutajaloendkasutajad={users} />;
};
eksportidavaikimisi UserListContainer;
Saate esitluse eraldada kahe esitluskomponendi vahel. Kasutaja ja Kasutajaloend. Igaüks neist vastutab lihtsalt märgistuse loomise eest saadud sisendrekvisiitide põhjal.
importida { Vaade, tekst, FlatList } alates'react-native';// Esitluskomponent
konst Kasutaja = ({ nimi, vanus }) => (Nimi: {nimi}</Text> Vanus: {vanus}</Text>
</View>
);
// Esitluskomponent
konst Kasutajaloend = ({ kasutajad }) => (
andmed={kasutajad}
keyExtractor={item => item.id}
renderItem={({ item }) => <Kasutajanimi={asja nimi}vanus={item.age} />}
/>
);
Uus kood eraldab algkomponendi kaheks esitluskomponendiks, Kasutaja ja Kasutajaloendja üks konteineri komponent, UserListContainer.
Konteinerite ja esitluskomponentide rakendamise parimad tavad
Konteinerite ja esitluskomponentide kasutamisel on oluline järgida mõningaid parimaid tavasid, et tagada komponentide kavandatud toimimine.
- Igal komponendil peaks olema selge ja konkreetne roll. Konteineri komponent peaks haldama olekut ja esitluskomponent visuaalset esitust.
- Võimaluse korral kasutage klassikomponentide asemel funktsionaalseid komponente. Need on lihtsamad, hõlpsamini testitavad ja pakuvad paremat jõudlust.
- Vältige loogika või funktsionaalsuse kaasamist komponenti, mis ei ole selle eesmärgi seisukohast oluline. See aitab hoida komponendid keskendunud ning neid on lihtne hooldada ja testida.
- Kasutage komponentidevaheliseks suhtluseks rekvisiite, eraldades selgelt probleemid ja vältides tihedalt seotud komponente.
- Oleku mittevajalikud värskendused võivad põhjustada jõudlusprobleeme, seetõttu on oluline olekut värskendada ainult vajaduse korral.
Nende parimate tavade järgimine tagab, et teie konteiner ja esitluskomponendid töötavad tõhusalt koos pakkuda puhast, organiseeritud ja skaleeritavat lahendust oleku ja visuaalse esitluse haldamiseks oma rakenduses React Native.
Konteinerite ja esitluskomponentide kasutamise eelised
Konteinerid ja esitluskomponendid võivad pakkuda mitmeid eeliseid. Need võivad aidata parandada teie koodistruktuuri, hooldatavust ja skaleeritavust. Nende tulemuseks on ka parem koostöö ja ülesannete delegeerimine meeskondade vahel. Need võivad isegi suurendada teie rakenduse React Native jõudlust ja optimeerida.
Järgige nende komponentide rakendamise parimaid tavasid ja saate luua paremaid ja skaleeritumaid React Native rakendusi.
