React vagy React Native fejlesztőként fontos megérteni a konténer és a prezentációs összetevők fogalmát.
Ezek a tervezési minták segítenek a problémák megfelelő elkülönítésében. Ezzel a koncepcióval biztosíthatja, hogy a kódot karbantarthatóbb és skálázhatóbb módon strukturálja.
Mik azok a konténer alkatrészek?
A tárolókomponensek, más néven intelligens összetevők felelősek az alkalmazásban lévő adatok és logikák kezeléséért. Olyan feladatokat látnak el, mint az adatok lekérése egy API-ból, az állapot frissítése és a felhasználói interakciók feldolgozása.
Ennek a szerkezetnek a megvalósításához használhatja egy könyvtár, például a React-Redux az összetevők tárolóhoz való csatlakoztatásához, valamint az adatok és műveletek átadásához az alárendelt összetevőknek vagy prezentációs összetevőknek.
Mik azok a prezentációs komponensek?
A prezentációs komponensek felelősek a szülőkomponenseik adatainak megjelenítéséért. Gyakran állapot nélküliek, és a felhasználói felületre és az adatok vizuális megjelenítésére összpontosítanak.
Ez az állapot könnyen kezelhetővé és tesztelhetővé teszi őket, így a buta komponensek elnevezést kapják. A prezentációs komponensek buta állapota lehetővé teszi, hogy újra felhasználja őket az egész alkalmazásban. Ezzel elkerülhető a silány és ismétlődő kód.
Miért használjunk tároló- és prezentációs összetevőket?
A kérdésre a rövid és egyszerű válasz: A gondok szétválasztása. Ez számos paradigma kulcsfontosságú alapelve, beleértve az objektumorientált, funkcionális és szempontorientált programozást. Sok React fejlesztő azonban hajlamos figyelmen kívül hagyni ezeket a fogalmakat, és úgy dönt, hogy olyan kódot ír, amely egyszerűen működik.
A kód, amely csak működik, nagyszerű, amíg le nem áll. A rosszul szervezett kódot nehezebb karbantartani és frissíteni. Ez bonyolulttá teheti az új funkciók hozzáadását vagy más programozók bevonását a projektbe. Ezeknek a problémáknak a kijavítása, ha már létrejött, megterhelő, és jobb, ha már a kezdetektől megelőzhető.
A konténer és a prezentációs komponensek tervezési mintájának alkalmazása biztosítja, hogy a projektben minden komponensnek egyértelmű feladata legyen, amelyet kezel. Ezzel olyan moduláris felépítést kapunk, amelyben minden optimalizált komponens összeáll az alkalmazás befejezéséhez.
Az összetevők továbbra is átfedhetik egymást; a feladatok megosztása a konténer és a prezentációs komponens között nem mindig egyértelmű. Általános szabályként azonban a prezentációs összetevőket a vizuális adatokra, a tárolókomponenseket pedig az adatokra és a logikára kell összpontosítania.
A tároló és a prezentációs összetevők használata a React Native programban
Egy tipikus React Native alkalmazásban gyakran készítenek olyan összetevőket, amelyek megjelenítési és logikai kódot is tartalmaznak. Lekérhet adatokat egy API-ból, kezelheti az űrlap állapotát, és megjelenítheti a kimenetet egy osztályban. Vegyünk egy egyszerű alkalmazást, amely megteszi lekérni a felhasználók listáját egy API-ból és megjeleníti a nevüket és életkorukat.
Ezt egyetlen komponenssel is megteheti, de nehezen olvasható, nem újrafelhasználható kódot eredményez, valamint nehezebben tesztelhető és karbantartható.
Például:
import React, { useState, useEffect } tól től'reagál';
import { Nézet, szöveg, lapos lista } tól től"react-native";const UserList = () => {
const [felhasználók, setUsers] = useState([]);useEffect(() => {
const fetchUsers = async () => {
const válasz = várja fetch(' https://example.com/users');
const adatok = várja válasz.json();
setUsers (adatok);
};fetchUsers();
}, []);Visszatérés (
adatok={felhasználók}
keyExtractor={item => item.id}
renderItem={({ item }) => (Név: {item.name}</Text> Életkor: {item.age}</Text>
</View>
)}
/>
);
};
exportalapértelmezett UserList;
Ebben a példában Felhasználólista felelős a beviteli mező állapotának kezeléséért, az adatok API-ból való lekéréséért és az adatok megjelenítéséért.
Ennek jobb és hatékonyabb módja az, ha a UserList logikáját prezentációs és tárolókomponensekre különítjük el.
Létrehozhat a UserListContainer komponens, amely felelős a felhasználói adatok lekéréséért és kezeléséért. Ezután átadhatja ezeket az adatokat egy prezentációs komponensnek, Felhasználólista, kellékként.
import React, { useState, useEffect } tól től'reagál';// Container Component
const UserListContainer = () => {
const [felhasználók, setUsers] = useState([]);useEffect(() => {
const fetchUsers = async () => {
const válasz = várja fetch(' https://example.com/users');
const adatok = várja válasz.json();
setUsers (adatok);
};fetchUsers();
}, []);Visszatérés<Felhasználólistafelhasználókat={users} />;
};
exportalapértelmezett UserListContainer;
A prezentációt két prezentációs komponens között választhatja szét: Felhasználó és Felhasználólista. Mindegyikük felelős azért, hogy egyszerűen jelölést generáljon a kapott bemeneti kellékek alapján.
import { Nézet, szöveg, lapos lista } tól től"react-native";// Prezentációs komponens
const Felhasználó = ({ név életkor }) => (Név: {name}</Text> Életkor: {életkor}</Text>
</View>
);
// Prezentációs komponens
const UserList = ({felhasználók }) => (
adatok={felhasználók}
keyExtractor={item => item.id}
renderItem={({ item }) => <Felhasználónév={termék név}kor={item.age} />}
/>
);
Az új kód az eredeti komponenst két megjelenítési komponensre választja szét, Felhasználó és Felhasználólistaés egy tartály komponens, UserListContainer.
Bevált gyakorlatok a konténer- és prezentációs komponensek megvalósításához
Ha konténer- és prezentációs összetevőket használ, fontos, hogy kövesse néhány bevált gyakorlatot, hogy biztosítsa az összetevők rendeltetésszerű működését.
- Minden komponensnek világos és konkrét szereppel kell rendelkeznie. A tároló komponensnek az állapotot, a prezentációs komponensnek pedig a vizuális megjelenítést kell kezelnie.
- Ahol lehetséges, használjon funkcionális komponenseket az osztályösszetevők helyett. Egyszerűbbek, könnyebben tesztelhetők és jobb teljesítményt nyújtanak.
- Kerülje a logika vagy funkcionalitás belefoglalását egy olyan összetevőbe, amely a cél szempontjából irreleváns. Ez segít megőrizni az alkatrészek fókuszát, és könnyen karbantartható és tesztelhető.
- Használjon kellékeket az alkatrészek közötti kommunikációhoz, világosan elkülönítve a problémákat, és elkerülve a szorosan összekapcsolt alkatrészeket.
- Az állapot szükségtelen frissítése teljesítményproblémákat okozhat, ezért fontos, hogy csak szükség esetén frissítse az állapotot.
A bevált gyakorlatok követése biztosítja, hogy a tároló és a prezentációs összetevők hatékonyan működjenek együtt tiszta, rendezett és méretezhető megoldást kínál az állapot és a vizuális megjelenítés kezelésére a React Native alkalmazásban.
A konténer és a prezentációs komponensek használatának előnyei
A konténer és a prezentációs komponensek számos előnnyel járhatnak. Segíthetnek javítani a kódszerkezetet, a karbantarthatóságot és a méretezhetőséget. Emellett jobb együttműködést és a feladatok csoportok közötti delegálását is eredményezik. Még a React Native alkalmazás teljesítményének és optimalizálásának növekedéséhez is vezethetnek.
Kövesse a bevált módszereket ezen összetevők megvalósításához, és jobb és jobban méretezhető React Native alkalmazásokat készíthet.