Jako vývojář React nebo React Native je důležité pochopit koncept kontejnerových a prezentačních komponent.
Tyto designové vzory pomáhají se správným oddělením obav. Tento koncept můžete použít k zajištění toho, že strukturujete svůj kód udržitelnějším a škálovatelnějším způsobem.
Co jsou součásti kontejneru?
Kontejnerové komponenty, známé také jako chytré komponenty, jsou zodpovědné za správu dat a logiky ve vaší aplikaci. Zpracovávají úkoly, jako je načítání dat z API, aktualizace stavu a zpracování uživatelských interakcí.
K implementaci této struktury můžete použít knihovna, jako je React-Redux pro připojení vašich komponent k úložišti a předání dat a akcí do vašich podřízených komponent nebo prezentačních komponent.
Co jsou to prezentační komponenty?
Prezentační komponenty jsou zodpovědné za zobrazení dat ze svých nadřazených komponent. Často jsou bezstavové a zaměřují se na uživatelské rozhraní a vizuální reprezentaci dat.
Tento stav s nimi usnadňuje manipulaci a testování, čímž si vysloužili jméno hloupých komponent. Němý stav prezentačních komponent vám umožňuje jejich opětovné použití v celé vaší aplikaci. Vyhnete se tak mizernému a opakujícímu se kódu.
Proč používat kontejnerové a prezentační komponenty?
Krátká a jednoduchá odpověď na otázku zní: Oddělení obav. Toto je klíčový princip v několika paradigmatech, včetně objektově orientovaného, funkčního a aspektově orientovaného programování. Mnoho vývojářů Reactu má však tendenci tyto koncepty ignorovat a rozhodnou se psát kód, který prostě funguje.
Kód, který prostě funguje, je skvělý, dokud nepřestane fungovat. Špatně organizovaný kód se obtížněji udržuje a aktualizuje. To může zkomplikovat přidávání nových funkcí nebo přivádění dalších programátorů k práci na projektu. Oprava těchto již vytvořených problémů je pracovní zátěž a je lepší jim předcházet hned na začátku.
Použití návrhového vzoru kontejneru a prezentačních komponent zajistí, že každá komponenta v rámci vašeho projektu bude mít jasný úkol, který zvládá. Tím je dosaženo modulární struktury, kde se každá optimalizovaná součást spojí a dokončí vaši aplikaci.
Vaše komponenty se mohou stále překrývat; rozdělení povinností mezi kontejner a prezentační složku není vždy zřetelné. Obecně však platí, že byste své prezentační komponenty měli zaměřit na vizuální data a komponenty kontejneru na data a logiku.
Jak používat kontejnerové a prezentační komponenty v React Native
V typické aplikaci React Native je běžné vytvářet komponenty, které obsahují prezentační i logický kód. V jedné třídě můžete načítat data z API, spravovat stav formuláře a zobrazovat výstup. Zvažte jednoduchou aplikaci, která to udělá načíst seznam uživatelů z API a zobrazovat jejich jména a věk.
Můžete to udělat s jedinou komponentou, ale výsledkem bude kód, který je obtížně čitelný, nelze jej znovu použít a je obtížnější jej testovat a udržovat.
Například:
import Reagovat, { useState, useEffect } z'reagovat';
import { View, Text, FlatList } z'react-native';konst Seznam uživatelů = () => {
konst [users, setUsers] = useState([]);useEffect(() => {
konst fetchUsers = asynchronní () => {
konst odpověď = čekat vynést(' https://example.com/users');
konst údaje = čekat response.json();
setUsers (data);
};fetchUsers();
}, []);vrátit se (
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => (Název: {item.name}</Text> Věk: {item.age}</Text>
</View>
)}
/>
);
};
vývoznívýchozí UserList;
V tomto příkladu Seznam uživatelů je zodpovědný za správu stavu vstupního pole, načítání dat z API a vykreslování dat.
Lepší a efektivnější způsob, jak to implementovat, je rozdělit logiku v UserList na komponenty prezentace a kontejneru.
Můžete vytvořit a UserListContainer komponentu, která je zodpovědná za načítání a správu uživatelských dat. Tato data pak může předat prezentační komponentě, Seznam uživatelů, jako rekvizita.
import Reagovat, { useState, useEffect } z'reagovat';// Komponenta kontejneru
konst UserListContainer = () => {
konst [users, setUsers] = useState([]);useEffect(() => {
konst fetchUsers = asynchronní () => {
konst odpověď = čekat vynést(' https://example.com/users');
konst údaje = čekat response.json();
setUsers (data);
};fetchUsers();
}, []);vrátit se<Seznam uživatelůuživatelů={users} />;
};
vývoznívýchozí UserListContainer;
Prezentaci můžete rozdělit mezi dvě prezentační součásti: Uživatel a Seznam uživatelů. Každý je zodpovědný za jednoduché generování značek na základě vstupních rekvizit, které obdrží.
import { View, Text, FlatList } z'react-native';// Prezentační komponenta
konst Uživatel = ({ jméno věk }) => (Jméno: {name}</Text> Věk: {age}</Text>
</View>
);
// Prezentační komponenta
konst Seznam uživatelů = ({ uživatelé }) => (
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => <Uživatelnázev={název položky}stáří={item.age} />}
/>
);
Nový kód rozděluje původní komponentu na dvě prezentační komponenty, Uživatel a Seznam uživatelůa jedna komponenta kontejneru, UserListContainer.
Osvědčené postupy pro implementaci kontejnerových a prezentačních komponent
Když používáte kontejnerové a prezentační komponenty, je důležité dodržovat některé osvědčené postupy, abyste zajistili, že komponenty budou fungovat tak, jak mají.
- Každá složka by měla mít jasnou a konkrétní roli. Komponenta kontejneru by měla spravovat stav a prezentační komponenta by měla zvládat vizuální prezentaci.
- Kde je to možné, používejte funkční komponenty místo komponent třídy. Jsou jednodušší, snáze se testují a poskytují lepší výkon.
- Vyhněte se zahrnutí logiky nebo funkčnosti do komponenty, která je pro její účel irelevantní. To pomáhá udržet komponenty soustředěné a snadno se udržují a testují.
- Pro komunikaci mezi komponentami používejte podpěry, jasně oddělte obavy a vyhněte se těsně propojeným komponentám.
- Zbytečné aktualizace stavu mohou vést k problémům s výkonem, takže je důležité aktualizovat stav pouze v případě potřeby.
Dodržování těchto doporučených postupů zajistí, že váš kontejner a prezentační komponenty budou efektivně spolupracovat poskytují čisté, organizované a škálovatelné řešení pro správu stavu a vizuální prezentace ve vaší aplikaci React Native.
Výhody použití kontejnerových a prezentačních komponent
Kontejnerové a prezentační komponenty mohou poskytnout několik výhod. Mohou pomoci zlepšit strukturu kódu, udržovatelnost a škálovatelnost. Výsledkem je také lepší spolupráce a delegování úkolů mezi týmy. Mohou dokonce vést ke zvýšení výkonu a optimalizaci vaší aplikace React Native.
Postupujte podle osvědčených postupů pro implementaci těchto komponent a můžete vytvářet lepší a škálovatelnější aplikace React Native.