React on yksi suosituimmista JavaScriptin käyttöliittymäkehyksistä. Toisin kuin muut kehykset, kuten Angular, se on hyvin mielipiteetön. Siksi sinun on päätettävä, kuinka haluat kirjoittaa tai jäsentää React-koodisi.

Tässä artikkelissa käsitellään joitain käytäntöjä, joita sinun tulee noudattaa parantaaksesi React-sovelluksesi suorituskykyä.

1. Toiminnallisten komponenttien ja koukkujen käyttäminen luokkien sijaan

Reactissa voit käytä luokan tai toiminnallisia komponentteja koukuilla. Sinun tulisi kuitenkin käyttää toiminnallisia komponentteja ja koukkuja useammin, koska ne johtavat tiiviimpään ja luettavampaan koodiin verrattuna luokkiin.

Harkitse seuraavaa luokkakomponenttia, joka näyttää NASA API: n tiedot.

luokka NasaData laajentaa Reactia. Komponentti {
 rakentaja (rekvisiitta) {
 super (rekvisiitta);
 this.state = {
 tiedot: [],
 };
 }
 componentDidMount() {
 hae(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 tiedot: json,





instagram viewer


 });
 });
 }
 render() {
 const { data } = this.state;
 jos (!data.length)
 paluu (


 Tietoja noudetaan... 
{" "}



 );
 paluu (
 <>
 Hae tiedot Class-komponentin avulla 
{" "}
 {data.map((kohde) => (
{item.title}

 ))}
 );
 }
}

Sama komponentti voidaan kirjoittaa koukkujen avulla.

const NasaData = () => {
 const [data, setdata] = useState (nolla);
 useEffect(() => {
 hae(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [tiedot]);
 paluu (
 <>
 Hae tiedot Class-komponentin avulla 
{" "}
 {data.map((kohde) => (
{item.title}

 ))}
 );
};

Vaikka yllä oleva koodilohko tekee saman asian kuin luokkakomponentti, se on vähemmän monimutkainen, minimaalinen ja helppo ymmärtää, mikä edistää parempaa kehittäjäkokemusta.

2. Vältä valtion käyttöä (jos mahdollista)

React-tila pitää kirjaa tiedoista, jotka muuttuessaan käynnistävät React-komponentin hahmontamisen uudelleen. Kun rakennat React-sovelluksia, vältä tilan käyttöä niin paljon kuin mahdollista, sillä mitä enemmän tilaa käytät, sitä enemmän tietoja sinun on seurattava sovelluksessasi.

Yksi tapa minimoida valtion käyttöä on ilmoittaa se vain tarvittaessa. Jos esimerkiksi haet käyttäjätietoja API: sta, tallenna koko käyttäjäobjekti tilaan sen sijaan, että tallennat yksittäisiä ominaisuuksia.

Tämän sijaan:

const [käyttäjänimi, setusername] = useState('')
const [salasana, aseta salasana] = useState('')

Toimi näin:

const [käyttäjä, asettaja] = useState({})

Kun päätät projektin rakenteesta, valitse komponenttikeskeinen. Tämä tarkoittaa, että kaikki yhtä komponenttia koskevat tiedostot on yhdessä kansiossa.

Jos luot a Navbar komponentti, luo kansio nimeltä navigointipalkki sisältävät Navbar itse komponentti, tyylisivu ja muut komponentissa käytetyt JavaSript- ja omaisuustiedostot.

Yksi kansio, joka sisältää kaikki komponentin tiedostot, tekee siitä helpon uudelleenkäytön, jakamisen ja virheenkorjauksen. Jos haluat nähdä, miten komponentti toimii, sinun tarvitsee avata vain yksi kansio.

4. Vältä indeksien käyttämistä avaina

React käyttää avaimia tunnistaakseen yksilöllisesti taulukon kohteet. Avainten avulla React voi määrittää, mikä kohde on muutettu, lisätty tai poistettu taulukosta.

Useimmiten taulukoita hahmonnettaessa voit käyttää hakemistoa avaimena.

const Items = () => {
 const arr = ["tuote1", "tuote2", "tuote3", "tuote4", "tuote5"];
 paluu (
 <>
 {arr.map((element, index) => {
{elem}
;
 })}
 );
};

Vaikka tämä joskus toimii, indeksin käyttäminen avaimena voi aiheuttaa ongelmia, varsinkin jos luettelon odotetaan muuttuvan. Harkitse tätä luetteloa.

const arr = ["tuote1", "tuote2", "tuote3", "tuote4", "tuote5"];

Tällä hetkellä luettelon ensimmäinen kohta "Kohde1" on indeksissä nolla, mutta jos lisäsit toisen kohteen luettelon alkuun, "Kohde1”-indeksi muuttuisi 1:ksi, mikä muuttaa taulukosi toimintaa.

Ratkaisu on käyttää ainutlaatuista arvoa indeksinä varmistaaksesi, että luettelokohteen identiteetti säilyy.

5. Valitse Fragmentit Dividen sijaan aina kun mahdollista

React-komponenttien on palautettava koodi yhteen tunnisteeseen käärittynä, yleensä a tai React-fragmentti. Sinun tulisi valita fragmentit mahdollisuuksien mukaan.

Käyttämällä lisää DOM-kokoa, etenkin suurissa projekteissa, koska mitä enemmän tunnisteita tai DOM-solmuja sinulla on, sitä enemmän muistia verkkosivustosi tarvitsee ja sitä enemmän tehoa selain käyttää verkkosivustosi lataamiseen. Tämä johtaa sivun nopeuden laskuun ja mahdollisesti huonoon käyttökokemukseen.

Yksi esimerkki tarpeettomien poistamisesta tags ei käytä niitä palauttaessaan yhden elementin.

const-painike = () => {
 palata Näyttö;
};

6. Noudata nimeämiskäytäntöjä

Sinun tulee aina käyttää PascalCasea komponenttien nimeämisessä erottaaksesi ne muista ei-komponentti-JSX-tiedostoista. Esimerkiksi: Tekstikenttä, NavMenu, ja Success Button.

Käytä camelCasea React-komponenttien sisällä ilmoitettuihin toimintoihin, kuten handleInput() tai showElement().

7. Vältä toistuvaa koodia

Jos huomaat kirjoittavasi päällekkäistä koodia, muunna se uudelleenkäytettäviksi komponenteiksi.

On esimerkiksi järkevämpää luoda komponentti navigointivalikkoon sen sijaan, että kirjoitat koodia toistuvasti jokaiseen valikon vaativaan komponenttiin.

Se on komponenttipohjaisen arkkitehtuurin etu. Voit jakaa projektisi pieniin osiin, joita voit käyttää uudelleen kaikissa sovelluksessasi.

8. Käytä objektien tuhoamista rekvisiittassa

Sen sijaan, että välität rekvisiittaobjektin, käytä objektin destrukturointia välittääksesi ehdotuksen nimi. Tämä poistaa tarpeen viitata rekvisiittaobjektiin joka kerta, kun sitä tarvitaan.

Esimerkiksi seuraava on komponentti, joka käyttää rekvisiitta sellaisenaan.

const Button = (rekvisiitta) => {
 palata {props.text};
};

Objektien rakenteen muuttamisessa viitataan suoraan tekstiin.

const Button = ({teksti}) => {
 palata {teksti};
};

9. Renderöi taulukot dynaamisesti käyttämällä karttaa

Käyttää kartta() dynaamisesti renderöimään toistuvia HTML-lohkoja. Voit esimerkiksi käyttää kartta() tehdäksesi luettelon kohteista tunnisteet.

const Items = () => {
 const arr = ["tuote1", "tuote2", "tuote3", "tuote4", "tuote5"];
 paluu (
 <>
 {arr.map((element, index) => {
{elem}
;
 })}
 );
 };

Vertailun vuoksi tässä on, kuinka voit hahmontaa luettelon ilman kartta(). Tämä lähestymistapa on hyvin toistuva.

const List = () => {
 paluu (


Kohde1

Kohde2

Kohde3

Kohde4

Kohde 5




 );
};

10. Kirjoita testit jokaiselle reaktiokomponentille

Kirjoita luomillesi komponenteille testejä, koska se vähentää virheiden mahdollisuutta. Testaus varmistaa, että komponentit toimivat odotetulla tavalla. Yksi Reactin yleisimmistä testauskehyksistä on Jest, ja se tarjoaa ympäristön, jossa voit suorittaa testejäsi.

Vaikka React on jokseenkin joustava sen käytön suhteen, tiettyjen käytäntöjen noudattaminen auttaa sinua saamaan kaiken irti kokemuksestasi.

Kun noudatat näitä vinkkejä, pidä projektisi ja tavoitteesi mielessäsi. jotkut niistä ovat tietyissä tapauksissa merkityksellisempiä kuin toiset.

API: ien käyttäminen Reactissa Fetchin ja Axiosin avulla

Haluatko tietää kuinka API: ita käytetään? API: n käytön ymmärtäminen Reactissa on keskeinen osa API käyttöä.

Lue Seuraava

Kirjailijasta