Ako vývojár React alebo React Native je dôležité pochopiť koncept kontajnerových a prezentačných komponentov.
Tieto dizajnové vzory pomáhajú pri správnom oddelení obáv. Tento koncept môžete použiť na zabezpečenie toho, aby ste svoj kód štruktúrovali lepšie udržiavateľným a škálovateľným spôsobom.
Čo sú komponenty kontajnera?
Komponenty kontajnera, známe aj ako inteligentné komponenty, sú zodpovedné za správu údajov a logiky vo vašej aplikácii. Zaoberajú sa úlohami, ako je načítanie údajov z rozhrania API, aktualizácia stavu a spracovanie interakcií používateľov.
Na implementáciu tejto štruktúry môžete použiť knižnica, ako je React-Redux na pripojenie vašich komponentov k obchodu a odovzdanie údajov a akcií vašim podriadeným komponentom alebo prezentačným komponentom.
Čo sú to prezentačné komponenty?
Prezentačné komponenty sú zodpovedné za zobrazovanie údajov zo svojich nadradených komponentov. Často sú bez štátnej príslušnosti a zameriavajú sa na používateľské rozhranie a vizuálnu reprezentáciu údajov.
Tento stav uľahčuje manipuláciu a testovanie, čím si vyslúžili meno hlúpych komponentov. Blbý stav prezentačných komponentov vám umožňuje ich opätovné použitie v celej vašej aplikácii. Vyhnete sa tak mizernému a opakujúcemu sa kódu.
Prečo používať kontajnerové a prezentačné komponenty?
Krátka a jednoduchá odpoveď na otázku znie: Oddelenie obáv. Toto je kľúčový princíp v niekoľkých paradigmách, vrátane objektovo orientovaného, funkčného a aspektovo orientovaného programovania. Mnohí vývojári Reactu však majú tendenciu ignorovať tieto koncepty a rozhodnú sa písať kód, ktorý jednoducho funguje.
Kód, ktorý jednoducho funguje, je skvelý, kým neprestane fungovať. Zle organizovaný kód sa ťažšie udržiava a aktualizuje. To môže sťažiť pridávanie nových funkcií alebo privádzanie ďalších programátorov do práce na projekte. Oprava týchto problémov, ktoré už boli vytvorené, je pracovná záťaž a je lepšie im predchádzať hneď od začiatku.
Použitie vzoru dizajnu kontajnerov a prezentačných komponentov zaistí, že každý komponent v rámci vášho projektu bude mať jasnú úlohu, ktorú zvládne. Dosiahne sa tak modulárna štruktúra, v ktorej sa každý optimalizovaný komponent spája a dopĺňa vašu aplikáciu.
Vaše komponenty sa môžu stále prekrývať; rozdelenie povinností medzi kontajner a prezentačný komponent nie je vždy zreteľné. Vo všeobecnosti by ste však mali svoje prezentačné komponenty zamerať na vizuálne údaje a komponenty kontajnera na údaje a logiku.
Ako používať kontajnerové a prezentačné komponenty v React Native
V typickej aplikácii React Native je bežné vytvárať komponenty, ktoré obsahujú prezentačný aj logický kód. Môžete načítať údaje z API, spravovať stav formulára a zobraziť výstup všetko v jednej triede. Zvážte jednoduchú aplikáciu, ktorá vám pomôže načítať zoznam používateľov z rozhrania API a zobraziť ich mená a vek.
Môžete to urobiť s jedným komponentom, ale výsledkom bude kód, ktorý sa ťažko číta, nedá sa opakovane použiť a ťažšie sa testuje a udržiava.
Napríklad:
importovať Reaguj, { useState, useEffect } od'reagovať';
importovať { View, Text, FlatList } od„react-native“;konšt UserList = () => {
konšt [users, setUsers] = useState([]);useEffect(() => {
konšt fetchUsers = async () => {
konšt odpoveď = čakať priniesť (' https://example.com/users');
konšt údaje = čakať response.json();
setUsers (údaje);
};fetchUsers();
}, []);vrátiť (
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => (Názov: {item.name}</Text> Vek: {item.age}</Text>
</View>
)}
/>
);
};
exportpredvolená UserList;
V tomto príklade UserList je zodpovedný za riadenie stavu vstupného poľa, získavanie údajov z API a vykresľovanie údajov.
Lepší a efektívnejší spôsob implementácie je rozdeliť logiku v UserList na komponenty prezentácie a kontajnera.
Môžete vytvoriť a UserListContainer komponent, ktorý je zodpovedný za získavanie a správu užívateľských údajov. Potom môže tieto údaje odovzdať prezentačnému komponentu, UserList, ako rekvizita.
importovať Reaguj, { useState, useEffect } od'reagovať';// Komponent kontajnera
konšt UserListContainer = () => {
konšt [users, setUsers] = useState([]);useEffect(() => {
konšt fetchUsers = async () => {
konšt odpoveď = čakať priniesť (' https://example.com/users');
konšt údaje = čakať response.json();
setUsers (údaje);
};fetchUsers();
}, []);vrátiť<UserListpoužívateľov={users} />;
};
exportpredvolená UserListContainer;
Prezentáciu môžete rozdeliť medzi dve prezentačné zložky: Používateľ a UserList. Každý je zodpovedný za jednoduché generovanie značiek na základe vstupných rekvizít, ktoré dostane.
importovať { View, Text, FlatList } od„react-native“;// Prezentačný komponent
konšt Používateľ = ({ meno, vek }) => (Meno: {name}</Text> Vek: {age}</Text>
</View>
);
// Prezentačný komponent
konšt UserList = ({ používatelia }) => (
data={users}
keyExtractor={item => item.id}
renderItem={({ položka }) => <Používateľnázov={názov položky}Vek={item.age} />}
/>
);
Nový kód rozdeľuje pôvodný komponent na dva prezentačné komponenty, Používateľ a UserLista jeden komponent kontajnera, UserListContainer.
Osvedčené postupy na implementáciu kontajnerových a prezentačných komponentov
Keď používate kontajnerové a prezentačné komponenty, je dôležité dodržiavať niektoré osvedčené postupy, aby ste zabezpečili, že komponenty budú fungovať tak, ako majú.
- Každý komponent by mal mať jasnú a špecifickú úlohu. Kontajnerový komponent by mal riadiť stav a prezentačný komponent by mal zvládnuť vizuálnu prezentáciu.
- Ak je to možné, použite funkčné komponenty namiesto komponentov triedy. Sú jednoduchšie, ľahšie testovateľné a poskytujú lepší výkon.
- Vyhnite sa zahrnutiu logiky alebo funkčnosti do komponentu, ktorý nie je relevantný pre jeho účel. To pomáha udržať komponenty sústredené a ľahko sa udržiavajú a testujú.
- Na komunikáciu medzi komponentmi používajte rekvizity, jasne oddeľujte obavy a vyhýbajte sa tesne prepojeným komponentom.
- Nepotrebné aktualizácie stavu môžu viesť k problémom s výkonom, preto je dôležité aktualizovať stav iba v prípade potreby.
Dodržiavanie týchto osvedčených postupov zaisťuje, že váš kontajner a prezentačné komponenty budú efektívne spolupracovať poskytujú čisté, organizované a škálovateľné riešenie na správu stavu a vizuálnej prezentácie vo vašej aplikácii React Native.
Výhody používania kontajnerových a prezentačných komponentov
Kontajnerové a prezentačné komponenty môžu poskytnúť niekoľko výhod. Môžu pomôcť zlepšiť štruktúru kódu, udržiavateľnosť a škálovateľnosť. Výsledkom je tiež lepšia spolupráca a delegovanie úloh medzi tímami. Môžu dokonca viesť k zvýšeniu výkonu a optimalizácii vašej aplikácie React Native.
Postupujte podľa osvedčených postupov implementácie týchto komponentov a môžete vytvárať lepšie a škálovateľnejšie aplikácie React Native.
