Twórz lepiej reagujące natywne aplikacje za pomocą kontenerów i komponentów prezentacyjnych
Jako programista React lub React Native ważne jest zrozumienie koncepcji kontenera i komponentów prezentacyjnych.
Te wzorce projektowe pomagają we właściwym oddzieleniu problemów. Możesz użyć tej koncepcji, aby upewnić się, że struktura kodu jest łatwiejsza w utrzymaniu i skalowalna.
Co to są komponenty kontenera?
Komponenty kontenera, znane również jako komponenty inteligentne, są odpowiedzialne za zarządzanie danymi i logiką w Twojej aplikacji. Obsługują takie zadania, jak pobieranie danych z interfejsu API, aktualizowanie stanu i przetwarzanie interakcji użytkownika.
Aby zaimplementować tę strukturę, możesz użyć biblioteki, takiej jak React-Redux, aby połączyć swoje komponenty ze sklepem i przekazać dane i działania do komponentów potomnych lub komponentów prezentacyjnych.
Czym są komponenty prezentacyjne?
Komponenty prezentacyjne są odpowiedzialne za wyświetlanie danych z ich komponentów nadrzędnych. Często są bezstanowe i koncentrują się na interfejsie użytkownika oraz wizualnej reprezentacji danych.
Ten stan ułatwia manipulowanie nimi i testowanie, dzięki czemu zyskały miano głupich komponentów. Głupi stan komponentów prezentacyjnych umożliwia ich ponowne użycie w całej aplikacji. Pozwala to uniknąć kiepskiego i powtarzalnego kodu.
Dlaczego warto używać kontenerów i komponentów prezentacyjnych?
Krótka i prosta odpowiedź na to pytanie brzmi: Rozdzielenie obaw. Jest to kluczowa zasada w kilku paradygmatach, w tym w programowaniu zorientowanym obiektowo, funkcjonalnie i aspektowo. Jednak wielu programistów React ma tendencję do ignorowania tych koncepcji i wybierania kodu, który po prostu działa.
Kod, który po prostu działa, jest świetny, dopóki nie przestanie działać. Źle zorganizowany kod jest trudniejszy do utrzymania i aktualizacji. Może to utrudnić dodawanie nowych funkcji lub angażowanie innych programistów do pracy nad projektem. Naprawianie tych problemów, które już powstały, jest obciążeniem pracą i lepiej zapobiegać im od samego początku.
Zastosowanie wzorca projektowego kontenera i komponentów prezentacyjnych zapewnia, że każdy komponent w projekcie ma jasno określone zadanie, które obsługuje. Dzięki temu uzyskuje się modułową strukturę, w której każdy zoptymalizowany komponent łączy się, aby ukończyć aplikację.
Twoje komponenty mogą nadal na siebie zachodzić; podział obowiązków między pojemnikiem a elementem prezentacyjnym nie zawsze jest wyraźny. Jednak z reguły należy skoncentrować komponenty prezentacji na danych wizualnych, a komponenty kontenera na danych i logice.
Jak używać kontenerów i komponentów prezentacyjnych w React Native
W typowej aplikacji React Native często tworzy się komponenty, które zawierają zarówno kod prezentacyjny, jak i związany z logiką. Możesz pobierać dane z interfejsu API, zarządzać stanem formularza i wyświetlać dane wyjściowe w jednej klasie. Rozważ prostą aplikację, która pobierze listę użytkowników z interfejsu API i wyświetli ich imiona i nazwiska oraz wiek.
Możesz to zrobić za pomocą pojedynczego komponentu, ale spowoduje to, że kod będzie trudny do odczytania, nienadający się do ponownego użycia i trudniejszy do testowania i utrzymywania.
Na przykład:
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View>
<Text>Name: {item.name}</Text>
<Text>Age: {item.age}</Text>
</View>
)}
/>
);
};
export default UserList;
W tym przykładzie UserList odpowiada za zarządzanie stanem pola wejściowego, pobieranie danych z interfejsu API i renderowanie danych.
Lepszym i wydajniejszym sposobem wdrożenia tego jest rozdzielenie logiki w UserList na komponenty prezentacji i kontenera.
Możesz utworzyć komponent UserListContainer , który jest odpowiedzialny za pobieranie i zarządzanie danymi użytkownika. Następnie może przekazać te dane do komponentu prezentacyjnego UserList jako rekwizyt.
import React, { useState, useEffect } from 'react';
// Container Component
const UserListContainer = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return <UserList users={users} />;
};
export default UserListContainer;
Możesz rozdzielić prezentację między dwa komponenty prezentacji: User i UserList . Każdy jest odpowiedzialny za proste generowanie znaczników na podstawie otrzymanych rekwizytów wejściowych.
import { View, Text, FlatList } from 'react-native';
// Presentational Component
const User = ({ name, age }) => (
<View>
<Text>Name: {name}</Text>
<Text>Age: {age}</Text>
</View>
);
// Presentational Component
const UserList = ({ users }) => (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => <User name={item.name} age={item.age} />}
/>
);
Nowy kod rozdziela oryginalny komponent na dwa komponenty prezentacyjne, User i UserList oraz jeden komponent kontenera, UserListContainer .
Najlepsze praktyki dotyczące implementacji kontenerów i komponentów prezentacyjnych
Podczas korzystania z kontenerów i komponentów prezentacyjnych ważne jest, aby postępować zgodnie z najlepszymi praktykami, aby upewnić się, że składniki działają zgodnie z przeznaczeniem.
- Każdy komponent powinien mieć jasną i określoną rolę. Komponent kontenera powinien zarządzać stanem, a komponent prezentacyjny powinien obsługiwać prezentację wizualną.
- Tam, gdzie to możliwe, używaj komponentów funkcjonalnych zamiast komponentów klasowych. Są prostsze, łatwiejsze do przetestowania i zapewniają lepszą wydajność.
- Unikaj dołączania logiki lub funkcjonalności do komponentu, który nie ma związku z jego przeznaczeniem. Pomaga to skoncentrować komponenty oraz ułatwia konserwację i testowanie.
- Używaj rekwizytów do komunikacji między komponentami, wyraźnie oddzielając problemy i unikając ściśle powiązanych komponentów.
- Niepotrzebne aktualizacje stanu mogą prowadzić do problemów z wydajnością, dlatego ważne jest, aby aktualizować stan tylko wtedy, gdy jest to konieczne.
Postępowanie zgodnie z tymi najlepszymi praktykami zapewnia efektywną współpracę kontenera i komponentów prezentacyjnych w celu zapewnienia przejrzystego, zorganizowanego i skalowalnego rozwiązania do zarządzania stanem i prezentacją wizualną w aplikacji React Native.
Korzyści z używania kontenerów i komponentów prezentacyjnych
Kontenery i komponenty prezentacyjne mogą zapewnić kilka korzyści. Mogą pomóc w ulepszeniu struktury kodu, łatwości konserwacji i skalowalności. Skutkuje to również lepszą współpracą i delegowaniem zadań pomiędzy zespołami. Mogą nawet prowadzić do zwiększenia wydajności i optymalizacji Twojej aplikacji React Native.
Postępuj zgodnie z najlepszymi praktykami wdrażania tych komponentów, a będziesz mógł tworzyć lepsze i bardziej skalowalne aplikacje React Native.
Dodaj komentarz