În calitate de dezvoltator React sau React Native, este important să înțelegeți conceptul de container și componente de prezentare.
Aceste modele de design ajută la separarea corectă a preocupărilor. Puteți utiliza acest concept pentru a vă asigura că vă structurați codul într-un mod mai ușor de întreținut și mai scalabil.
Ce sunt componentele containerului?
Componentele containerului, cunoscute și ca componente inteligente, sunt responsabile pentru gestionarea datelor și a logicii din aplicația dvs. Aceștia se ocupă de sarcini precum preluarea datelor dintr-un API, actualizarea stării și procesarea interacțiunilor utilizatorului.
Pentru a implementa această structură, puteți utiliza o bibliotecă precum React-Redux pentru a vă conecta componentele la magazin și a transmite date și acțiuni către componentele copilului sau componentele de prezentare.
Ce sunt componentele de prezentare?
Componentele de prezentare sunt responsabile pentru afișarea datelor din componentele lor părinte. Ele sunt adesea apatride și se concentrează pe UI și pe reprezentarea vizuală a datelor.
Această stare le face ușor de manipulat și testat, câștigându-le numele de componente proaste. Starea stupidă a componentelor de prezentare vă permite să le reutilizați în întreaga aplicație. Acest lucru evită codurile proaste și repetitive.
De ce să folosiți containere și componente de prezentare?
Răspunsul scurt și simplu la întrebare este: Separarea preocupărilor. Acesta este un principiu cheie în mai multe paradigme, inclusiv programarea orientată pe obiecte, funcțională și orientată pe aspecte. Cu toate acestea, mulți dezvoltatori React tind să ignore aceste concepte și optează pentru a scrie cod care funcționează.
Codul care pur și simplu funcționează este grozav, până când nu mai funcționează. Codul prost organizat este mai greu de întreținut și actualizat. Acest lucru poate face dificilă adăugarea de noi funcții sau aducerea altor programatori care să lucreze la proiect. Remedierea acestor probleme odată create deja este o sarcină de muncă și sunt mai bine prevenite de la început.
Aplicarea modelului de design al containerului și al componentelor de prezentare asigură că fiecare componentă din proiectul dvs. are o sarcină clară pe care o gestionează. Se realizează astfel o structură modulară în care fiecare componentă optimizată se reunește pentru a vă completa aplicația.
Componentele dvs. se pot suprapune în continuare; împărțirea sarcinilor între un container și o componentă de prezentare nu este întotdeauna distinctă. Cu toate acestea, ca regulă generală, ar trebui să vă concentrați componentele de prezentare pe datele vizuale, iar componentele containerului pe date și logică.
Cum se utilizează containerul și componentele de prezentare în React Native
Într-o aplicație tipică React Native, este obișnuit să se creeze componente care conțin atât cod de prezentare, cât și cod legat de logică. Puteți prelua date dintr-un API, puteți gestiona starea unui formular și puteți afișa rezultatele într-o singură clasă. Luați în considerare o aplicație simplă care va fi preluați o listă de utilizatori dintr-un API și afișează numele și vârsta lor.
Puteți face acest lucru cu o singură componentă, dar va avea ca rezultat un cod greu de citit, nereutilizabil și mai greu de testat și întreținut.
De exemplu:
import Reacționează, { useState, useEffect } din'reacţiona';
import { View, Text, FlatList } din„reacționează-nativ”;const UserList = () => {
const [utilizatori, setUsers] = useState([]);useEffect(() => {
const fetchUsers = asincron () => {
const răspuns = așteaptă aduce(' https://example.com/users');
const date = așteaptă răspuns.json();
setUsers (date);
};fetchUsers();
}, []);întoarcere (
date={utilizatori}
keyExtractor={item => item.id}
renderItem={({ item }) => (Nume: {item.name}</Text> Vârsta: {item.age}</Text>
</View>
)}
/>
);
};
exportMod implicit Lista utilizatorilor;
În acest exemplu, Lista de utilizatori este responsabil pentru gestionarea stării unui câmp de intrare, preluarea datelor dintr-un API și redarea datelor.
Cel mai bun și mai eficient mod de a implementa acest lucru este de a separa logica din UserList în componente de prezentare și container.
Puteți crea un UserListContainer componentă care este responsabilă pentru preluarea și gestionarea datelor utilizatorului. Apoi poate transmite aceste date unei componente de prezentare, Lista de utilizatori, ca recuzită.
import Reacționează, { useState, useEffect } din'reacţiona';// Componenta Container
const UserListContainer = () => {
const [utilizatori, setUsers] = useState([]);useEffect(() => {
const fetchUsers = asincron () => {
const răspuns = așteaptă aduce(' https://example.com/users');
const date = așteaptă răspuns.json();
setUsers (date);
};fetchUsers();
}, []);întoarcere<Lista de utilizatoriutilizatorii={utilizatori} />;
};
exportMod implicit UserListContainer;
Puteți separa prezentarea între două componente de prezentare: Utilizator și Lista de utilizatori. Fiecare este responsabil pentru pur și simplu generarea de markup pe baza elementelor de recuzită pe care le primesc.
import { View, Text, FlatList } din„reacționează-nativ”;// Componenta de prezentare
const Utilizator = ({ nume, vârstă }) => (Nume: {name}</Text> Vârsta: {vârsta}</Text>
</View>
);
// Componenta de prezentare
const UserList = ({ utilizatori }) => (
date={utilizatori}
keyExtractor={item => item.id}
renderItem={({ item }) => <UtilizatorNume={item.name}vârstă={item.age} />}
/>
);
Noul cod separă componenta originală în două componente de prezentare, Utilizator și Lista de utilizatoriși o componentă a containerului, UserListContainer.
Cele mai bune practici pentru implementarea componentelor containere și de prezentare
Atunci când utilizați componente pentru container și prezentare, este important să urmați câteva bune practici pentru a vă asigura că componentele funcționează conform intenției.
- Fiecare componentă trebuie să aibă un rol clar și specific. Componenta container ar trebui să gestioneze starea, iar componenta de prezentare ar trebui să se ocupe de prezentarea vizuală.
- Acolo unde este posibil, utilizați componente funcționale în loc de componente de clasă. Sunt mai simple, mai ușor de testat și oferă performanțe mai bune.
- Evitați să includeți logica sau funcționalitatea într-o componentă care este irelevantă pentru scopul acesteia. Acest lucru ajută la menținerea componentelor concentrate și ușor de întreținut și testat.
- Utilizați elemente de recuzită pentru comunicarea între componente, separând clar preocupările și evitând componentele strâns cuplate.
- Actualizările inutile ale stării pot duce la probleme de performanță, așa că este important să actualizați starea numai atunci când este necesar.
Urmând aceste bune practici se asigură că containerul și componentele de prezentare funcționează împreună eficient oferiți o soluție curată, organizată și scalabilă pentru gestionarea prezentării vizuale și a stării în aplicația dvs. React Native.
Beneficiile utilizării containerelor și componentelor de prezentare
Containerul și Componentele de prezentare pot oferi mai multe beneficii. Ele vă pot ajuta să vă îmbunătățiți structura codului, mentenabilitatea și scalabilitatea. Acestea au ca rezultat, de asemenea, o mai bună colaborare și delegare a sarcinilor între echipe. Ele pot duce chiar la creșterea performanței și la optimizarea aplicației dvs. React Native.
Urmați cele mai bune practici pentru implementarea acestor componente și puteți crea aplicații React Native mai bune și mai scalabile.
