Kaip „React“ arba „React Native“ kūrėjui svarbu suprasti konteinerio ir pristatymo komponentų sąvoką.
Šie dizaino modeliai padeda tinkamai atskirti problemas. Šią koncepciją galite naudoti norėdami užtikrinti, kad kodo struktūra būtų lengviau prižiūrima ir keičiama.
Kas yra konteinerio komponentai?
Sudėtinio rodinio komponentai, taip pat žinomi kaip išmanieji komponentai, yra atsakingi už duomenų ir logikos tvarkymą programoje. Jie atlieka tokias užduotis kaip duomenų gavimas iš API, būsenos atnaujinimas ir vartotojo sąveikų apdorojimas.
Norėdami įgyvendinti šią struktūrą, galite naudoti biblioteka, pvz., React-Redux prijungti komponentus prie parduotuvės ir perduoti duomenis bei veiksmus antriniams komponentams arba pristatymo komponentams.
Kas yra pristatymo komponentai?
Pristatymo komponentai yra atsakingi už duomenų iš pirminių komponentų rodymą. Jie dažnai yra be pilietybės ir daugiausia dėmesio skiria vartotojo sąsajai bei vizualiniam duomenų vaizdavimui.
Dėl šios būsenos jais lengva manipuliuoti ir išbandyti, todėl jie vadinami kvailais komponentais. Kvaila pristatymo komponentų būsena leidžia pakartotinai juos naudoti visoje programoje. Taip išvengiama bjauraus ir pasikartojančio kodo.
Kodėl naudoti konteinerį ir pristatymo komponentus?
Trumpas ir paprastas atsakymas į klausimą yra toks: rūpesčių atskyrimas. Tai yra pagrindinis principas keliose paradigmose, įskaitant į objektą orientuotą, funkcinį ir į aspektą orientuotą programavimą. Tačiau daugelis „React“ kūrėjų yra linkę ignoruoti šias sąvokas ir renkasi rašyti veikiantį kodą.
Kodas, kuris tiesiog veikia, yra puikus, kol nustoja veikti. Blogai organizuotą kodą sunkiau prižiūrėti ir atnaujinti. Dėl to gali būti sudėtinga pridėti naujų funkcijų arba pasitelkti kitus programuotojus dirbti su projektu. Šių jau sukurtų problemų sprendimas yra darbo krūvis, todėl geriau jų išvengti iš pat pradžių.
Taikydami konteinerio ir pristatymo komponentų projektavimo modelį užtikrinate, kad kiekvienas jūsų projekto komponentas turi aiškią užduotį, kurią jis atlieka. Taip pasiekiama modulinė struktūra, kurioje kiekvienas optimizuotas komponentas sujungiamas, kad užbaigtų jūsų programą.
Jūsų komponentai vis tiek gali sutapti; pareigų pasiskirstymas tarp konteinerio ir pristatymo komponento ne visada skiriasi. Tačiau paprastai savo pristatymo komponentus turėtumėte sutelkti į vaizdinius duomenis, o sudėtinio rodinio komponentus – į duomenis ir logiką.
Kaip naudoti talpyklą ir pristatymo komponentus „React Native“.
Įprastoje „React Native“ programoje įprasta kurti komponentus, kuriuose yra ir pateikimo, ir su logika susijęs kodas. Galite gauti duomenis iš API, valdyti formos būseną ir rodyti išvestį vienoje klasėje. Apsvarstykite paprastą programą, kuri padės gauti vartotojų sąrašą iš API ir parodyti jų vardus bei amžių.
Tai galite padaryti naudodami vieną komponentą, tačiau dėl to kodas bus sunkiai įskaitomas, jo negalima pakartotinai naudoti ir kurį bus sunkiau išbandyti bei prižiūrėti.
Pavyzdžiui:
importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti { View, Text, FlatList } iš'react-native';konst Vartotojų sąrašas = () => {
konst [naudotojai, setUsers] = useState([]);useEffect (() => {
konst fetchUsers = async () => {
konst atsakymas = laukti atnešti (' https://example.com/users');
konst duomenys = laukti atsakymas.json();
setUsers (duomenys);
};fetchUsers ();
}, []);grąžinti (
data={users}
keyExtractor={item => item.id}
renderItem={({ elementas }) => (Pavadinimas: {item.name}</Text> Amžius: {item.age}</Text>
</View>
)}
/>
);
};
eksportuotinumatytas Vartotojų sąrašas;
Šiame pavyzdyje Vartotojų sąrašas yra atsakingas už įvesties lauko būsenos valdymą, duomenų gavimą iš API ir duomenų pateikimą.
Geresnis ir efektyvesnis būdas tai įgyvendinti yra atskirti UserList logiką į pristatymo ir konteinerio komponentus.
Galite sukurti a UserListContainer komponentas, atsakingas už vartotojo duomenų gavimą ir tvarkymą. Tada jis gali perduoti šiuos duomenis pristatymo komponentui, Vartotojų sąrašas, kaip rekvizitas.
importuoti Reaguoti, { useState, useEffect } iš'reaguoti';// Konteinerio komponentas
konst UserListContainer = () => {
konst [naudotojai, setUsers] = useState([]);useEffect (() => {
konst fetchUsers = async () => {
konst atsakymas = laukti atnešti (' https://example.com/users');
konst duomenys = laukti atsakymas.json();
setUsers (duomenys);
};fetchUsers ();
}, []);grąžinti<Vartotojų sąrašasvartotojų={users} />;
};
eksportuotinumatytas UserListContainer;
Galite atskirti pristatymą į du pristatymo komponentus: Vartotojas ir Vartotojų sąrašas. Kiekvienas iš jų yra atsakingas už tiesiog žymėjimo generavimą pagal gaunamus įvesties rekvizitus.
importuoti { View, Text, FlatList } iš'react-native';// Pristatymo komponentas
konst Vartotojas = ({ vardas, amžius }) => (Vardas: {name}</Text> Amžius: {amžius}</Text>
</View>
);
// Pristatymo komponentas
konst Vartotojų sąrašas = ({ vartotojai }) => (
data={users}
keyExtractor={item => item.id}
renderItem={({ elementas }) => <Vartotojasvardas={daikto pavadinimas}amžiaus={item.age} />}
/>
);
Naujasis kodas išskiria pradinį komponentą į du pateikimo komponentus, Vartotojas ir Vartotojų sąrašasir vienas konteinerio komponentas, UserListContainer.
Geriausia konteinerių ir pristatymo komponentų diegimo praktika
Kai naudojate talpyklą ir pristatymo komponentus, svarbu vadovautis kai kuriomis geriausios praktikos pavyzdžiais, siekiant užtikrinti, kad komponentai veiktų taip, kaip numatyta.
- Kiekvienas komponentas turi turėti aiškų ir specifinį vaidmenį. Konteinerio komponentas turėtų valdyti būseną, o pristatymo komponentas – vaizdinį pateikimą.
- Jei įmanoma, vietoj klasės komponentų naudokite funkcinius komponentus. Jie yra paprastesni, lengviau išbandomi ir užtikrina geresnį našumą.
- Stenkitės neįtraukti logikos ar funkcionalumo į komponentą, kuris nėra susijęs su jo paskirtimi. Tai padeda sutelkti komponentus, juos lengva prižiūrėti ir išbandyti.
- Komponentų ryšiui naudokite rekvizitus, aiškiai atskirdami problemas ir vengdami glaudžiai sujungtų komponentų.
- Nereikalingi būsenos atnaujinimai gali sukelti našumo problemų, todėl svarbu atnaujinti būseną tik tada, kai reikia.
Vadovaudamiesi šia geriausia praktika užtikrinsite, kad jūsų sudėtinis rodinys ir pristatymo komponentai veiks efektyviai Pateikite švarų, organizuotą ir keičiamo dydžio sprendimą būsenai ir vaizdiniam pristatymui „React Native“ programoje valdyti.
Konteinerio ir pristatymo komponentų naudojimo pranašumai
Konteineris ir pristatymo komponentai gali suteikti keletą privalumų. Jie gali padėti pagerinti kodo struktūrą, prižiūrėti ir keisti mastelį. Jie taip pat pagerina komandų bendradarbiavimą ir užduočių delegavimą. Jie netgi gali padidinti jūsų „React Native“ programos našumą ir optimizuoti.
Vadovaukitės geriausios šių komponentų diegimo praktikos pavyzdžiais ir galėsite kurti geresnes bei labiau keičiamo dydžio „React Native“ programas.