Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

React- tai React Native -kehittäjänä on tärkeää ymmärtää kontin ja esityskomponenttien käsite.

Nämä suunnittelumallit auttavat erottamaan huolenaiheet asianmukaisesti. Tämän konseptin avulla voit varmistaa, että rakennat koodisi paremmin ylläpidettävällä ja skaalautuvalla tavalla.

Mitä ovat säiliön komponentit?

Säiliökomponentit, joita kutsutaan myös älykkäiksi komponenteiksi, vastaavat sovelluksesi tietojen ja logiikan hallinnasta. He hoitavat tehtäviä, kuten tietojen hakemisen API: lta, tilan päivittämisen ja käyttäjien vuorovaikutusten käsittelyn.

Tämän rakenteen toteuttamiseksi voit käyttää kirjasto, kuten React-Redux yhdistääksesi komponentit kauppaan ja välittääksesi tiedot ja toiminnot alatason komponenteille tai esityskomponenteille.

Mitä ovat esittelykomponentit?

Esityskomponentit vastaavat vanhempiensa komponenttien tietojen näyttämisestä. Ne ovat usein valtiottomia ja keskittyvät käyttöliittymään ja tietojen visuaaliseen esitykseen.

instagram viewer

Tämän tilan ansiosta niitä on helppo käsitellä ja testata, mikä ansaitsee niille tyhmien komponenttien nimen. Esityskomponenttien tyhmän tilan ansiosta voit käyttää niitä uudelleen koko sovelluksessasi. Näin vältytään surkealta ja toistuvalta koodilta.

Miksi käyttää säiliöitä ja esittelykomponentteja?

Lyhyt ja yksinkertainen vastaus kysymykseen on: Separation of Concerns. Tämä on keskeinen periaate useissa paradigmoissa, mukaan lukien olio-, toiminnallinen ja aspektisuuntautunut ohjelmointi. Monet React-kehittäjät jättävät kuitenkin huomiotta nämä käsitteet ja valitsevat vain toimivan koodin kirjoittamisen.

Koodi, joka vain toimii, on loistava, kunnes se lakkaa toimimasta. Huonosti järjestetty koodi on vaikeampi ylläpitää ja päivittää. Tämä voi tehdä uusien ominaisuuksien lisäämisestä tai muiden ohjelmoijien kutsumisesta mukaan projektiin. Näiden ongelmien korjaaminen, kun ne on jo luotu, on työtaakkaa, ja ne voidaan paremmin estää alusta alkaen.

Säiliön ja esityskomponenttien suunnittelumallin soveltaminen varmistaa, että jokaisella projektisi komponentilla on selkeä tehtävä, jonka se hoitaa. Näin saavutetaan modulaarinen rakenne, jossa jokainen optimoitu komponentti täydentää sovelluksesi.

Komponentit voivat silti mennä päällekkäin; tehtävien jako kontin ja esittelykomponentin välillä ei ole aina selkeää. Yleissääntönä on kuitenkin, että esityskomponentit tulisi keskittyä visuaaliseen dataan ja säilökomponentit dataan ja logiikkaan.

Säiliön ja esittelykomponenttien käyttäminen React Nativessa

Tyypillisessä React Native -sovelluksessa on tavallista luoda komponentteja, jotka sisältävät sekä esitystapaa että logiikkaan liittyvää koodia. Voit hakea tietoja API: sta, hallita lomakkeen tilaa ja näyttää tulosteen kaikki yhdessä luokassa. Harkitse yksinkertaista sovellusta, joka toimii noutaa käyttäjäluettelon API: sta ja näyttää heidän nimensä ja ikänsä.

Voit tehdä tämän yhdellä komponentilla, mutta se johtaa koodiin, jota on vaikea lukea, jota ei voi käyttää uudelleen ja jota on vaikeampi testata ja ylläpitää.

Esimerkiksi:

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti { View, Text, FlatList } alkaen'react-native';
konst Käyttäjälista = () => {
konst [käyttäjät, setUsers] = useState([]);


 useEffect(() => {
konst fetchUsers = asynk () => {
konst vastaus = odottaa hae(' https://example.com/users');
konst data = odottaa vastaus.json();
 setUsers (data);
 };


 fetchUsers();
 }, []);


palata (
 data={käyttäjät}
 keyExtractor={item => item.id}
 renderItem={({ item }) => (

Nimi: {item.name}</Text>
Ikä: {item.age}</Text>
 </View>
 )}
 />
 );
};
viedäoletuksena UserList;

Tässä esimerkissä Käyttäjälista on vastuussa syöttökentän tilan hallinnasta, tietojen hakemisesta API: sta ja tietojen hahmontamisesta.

Parempi ja tehokkaampi tapa toteuttaa tämä on erottaa UserListin logiikka esitys- ja säiliökomponentteihin.

Voit luoda a UserListContainer komponentti, joka vastaa käyttäjätietojen noutamisesta ja hallinnasta. Se voi sitten välittää nämä tiedot esityskomponenttiin, Käyttäjälista, rekvisiittana.

tuonti React, { useState, useEffect } alkaen'reagoi';
// Säiliön komponentti
konst UserListContainer = () => {
konst [käyttäjät, setUsers] = useState([]);


 useEffect(() => {
konst fetchUsers = asynk () => {
konst vastaus = odottaa hae(' https://example.com/users');
konst data = odottaa vastaus.json();
 setUsers (data);
 };


 fetchUsers();
 }, []);


palata<Käyttäjälistakäyttäjiä={käyttäjät} />;
};
viedäoletuksena UserListContainer;

Voit erottaa esityksen kahdesta esityskomponentista: Käyttäjä ja Käyttäjälista. Jokainen on vastuussa yksinkertaisesti merkintöjen luomisesta vastaanottamiensa syötteiden perusteella.

tuonti { View, Text, FlatList } alkaen'react-native';
// Esittelykomponentti
konst Käyttäjä = ({ nimi Ikä }) => (

Nimi: {nimi}</Text>
Ikä: {age}</Text>
 </View>
);
// Esittelykomponentti
konst Käyttäjälista = ({ käyttäjät }) => (
 data={käyttäjät}
 keyExtractor={item => item.id}
 renderItem={({ item }) => <Käyttäjänimi={tuotteen nimi}ikä={item.age} />}
 />
);

Uusi koodi erottaa alkuperäisen komponentin kahdeksi esityskomponentiksi, Käyttäjä ja Käyttäjälistaja yksi säiliökomponentti, UserListContainer.

Parhaat käytännöt säiliöiden ja esittelykomponenttien käyttöönottamiseksi

Kun käytät säilö- ja esityskomponentteja, on tärkeää noudattaa joitain parhaita käytäntöjä varmistaaksesi, että komponentit toimivat tarkoitetulla tavalla.

  1. Jokaisella komponentilla tulee olla selkeä ja erityinen rooli. Säiliökomponentin tulee hallita tilaa ja esityskomponentin visuaalista esitystapaa.
  2. Käytä mahdollisuuksien mukaan toiminnallisia komponentteja luokkakomponenttien sijaan. Ne ovat yksinkertaisempia, helpompia testata ja tarjoavat paremman suorituskyvyn.
  3. Vältä sisällyttämästä logiikkaa tai toimintoja komponenttiin, joka ei ole merkityksellinen sen tarkoituksen kannalta. Tämä auttaa pitämään komponentit keskittyneinä ja helppohoitoisia ja testattavia.
  4. Käytä tukia komponenttien väliseen viestintään, erottele huolenaiheet selkeästi ja vältä tiiviisti kytkettyjä komponentteja.
  5. Tilan tarpeettomat päivitykset voivat johtaa suorituskykyongelmiin, joten on tärkeää päivittää tila vain tarvittaessa.

Näiden parhaiden käytäntöjen noudattaminen varmistaa, että säilösi ja esittelykomponentit toimivat yhdessä tehokkaasti tarjoaa puhtaan, organisoidun ja skaalautuvan ratkaisun tilan ja visuaalisen esityksen hallintaan React Native -sovelluksessasi.

Säiliön ja esittelykomponenttien käytön edut

Säiliö- ja esittelykomponentit voivat tarjota useita etuja. Ne voivat auttaa parantamaan koodin rakennetta, ylläpidettävyyttä ja skaalautuvuutta. Ne johtavat myös parempaan yhteistyöhön ja tehtävien delegointiin tiimien kesken. Ne voivat jopa parantaa React Native -sovelluksesi suorituskykyä ja optimointia.

Noudata parhaita käytäntöjä näiden komponenttien käyttöönotossa ja voit rakentaa parempia ja skaalautuvia React Native -sovelluksia.