Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

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ć biblioteka taka jak React-Redux aby połączyć twoje komponenty ze sklepem i przekazywać dane i działania do twoich komponentów podrzędnych 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.

instagram viewer

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 gwarantuje, ż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 to zrobi pobrać listę użytkowników z interfejsu API i wyświetlać ich imiona i 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 Reaguj, { useState, useEffect } z'reagować';
import { Widok, tekst, płaska lista } z„reaguj natywnie”;
konst Lista użytkowników = () => {
konst [użytkownicy, setUsers] = useState([]);


 użyjEfekt(() => {
konst pobierz użytkowników = asynchroniczny () => {
konst odpowiedź = czekać na aportować(' https://example.com/users');
konst dane = czekać na odpowiedź.json();
 setUsers (dane);
 };


 fetchUsers();
 }, []);


powrót (
 dane={użytkownicy}
 keyExtractor={item => item.id}
 renderItem={({ element }) => (

Nazwa: {item.name}</Text>
Wiek: {item.age}</Text>
 </View>
 )}
 />
 );
};
eksportdomyślny Lista użytkowników;

w tym przykładzie Lista użytkowników jest odpowiedzialny 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ć UserListContainer komponent odpowiedzialny za pobieranie i zarządzanie danymi użytkownika. Następnie może przekazać te dane do komponentu prezentacyjnego, Lista użytkowników, jako rekwizyt.

import Reaguj, { useState, useEffect } z'reagować';
// Składnik kontenera
konst UserListContainer = () => {
konst [użytkownicy, setUsers] = useState([]);


 użyjEfekt(() => {
konst pobierz użytkowników = asynchroniczny () => {
konst odpowiedź = czekać na aportować(' https://example.com/users');
konst dane = czekać na odpowiedź.json();
 setUsers (dane);
 };


 fetchUsers();
 }, []);


powrót<Lista użytkownikówużytkownicy={użytkownicy} />;
};
eksportdomyślny UserListContainer;

Możesz rozdzielić prezentację między dwa komponenty prezentacji: Użytkownik I Lista użytkowników. Każdy jest odpowiedzialny za proste generowanie znaczników na podstawie otrzymanych rekwizytów wejściowych.

import { Widok, tekst, płaska lista } z„reaguj natywnie”;
// Komponent prezentacyjny
konst Użytkownik = ({ imię Wiek }) => (

Imię: {imię}</Text>
Wiek: {wiek}</Text>
 </View>
);
// Komponent prezentacyjny
konst Lista użytkowników = ({ użytkownicy }) => (
 dane={użytkownicy}
 keyExtractor={item => item.id}
 renderItem={({ pozycja }) => <Użytkowniknazwa={nazwa przedmiotu}wiek={item.wiek} />}
 />
);

Nowy kod rozdziela oryginalny komponent na dwa komponenty prezentacyjne, Użytkownik I Lista użytkownikówi jeden komponent pojemnika, 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.

  1. Każdy komponent powinien mieć jasną i określoną rolę. Komponent kontenera powinien zarządzać stanem, a komponent prezentacyjny powinien obsługiwać prezentację wizualną.
  2. Tam, gdzie to możliwe, używaj komponentów funkcjonalnych zamiast komponentów klasowych. Są prostsze, łatwiejsze do przetestowania i zapewniają lepszą wydajność.
  3. 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.
  4. Używaj rekwizytów do komunikacji między komponentami, wyraźnie oddzielając problemy i unikając ściśle powiązanych komponentów.
  5. 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 prezentacji zapewnij przejrzyste, zorganizowane i skalowalne rozwiązanie do zarządzania stanem i prezentacją wizualną w Twojej 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.