Ota kaikki irti React Hookeista näiden parhaiden käytäntöjen avulla

Jos olet uusi Reactin käyttäjä, saatat miettiä, mitä React Hooks ovat ja milloin sinun pitäisi käyttää niitä. React esitteli vain koukut 16.8-julkaisussaan, mutta niistä on nopeasti tullut kirjaston olennainen ominaisuus.

Opi kaikki React Hookien perusteista ja löydä parhaita käytäntöjä niiden käyttämiseen React-sovelluksissasi.

Mitä React-koukut ovat?

React Hooks antaa sinun käyttää tila- ja muita React-ominaisuuksia kirjoittamatta ylimääräistä koodia. Koukut ovat loistava tapa tehdä koodistasi luettavampi ja ylläpidettävämpi.

Niitä on muutama erilaisia ​​koukkuja Reactissa, mutta yleisimmin käytetyt ovat useState ja useEffect. UseState-koukun avulla voit lisätä tilan komponentteihisi. Tästä on hyötyä esimerkiksi käyttäjän syötteiden tai lomakkeen muutosten seuraamiseen. UseEffect-koukun avulla voit suorittaa funktion aina, kun komponentti renderöi. Tästä on hyötyä esimerkiksi tietojen hakemisessa API: sta tai tilauksen määrittämisestä.

Milloin sinun pitäisi käyttää React-koukkuja?

Sinun tulee käyttää React Hooksia aina, kun haluat lisätä komponenttiin ylimääräisiä toimintoja. Jos esimerkiksi haluat seurata käyttäjän syötteitä, käytä useState-koukkua. Jos sinun on noudettava tietoja API: sta, käytä useEffect-koukkua. Voit myös

luoda mukautettuja koukkuja API-kutsuille.

Jos olet juuri aloittanut Reactin käytön, sinun ei ehkä tarvitse vielä käyttää Hooksia. Mutta kun rakennat monimutkaisempia sovelluksia, huomaat, että Hooks on loistava tapa lisätä lisätoimintoja komponentteihin.

Parhaat käytännöt React-koukkujen kanssa

Nyt kun tiedät mitä React Hooks ovat ja milloin niitä tulee käyttää, puhutaanpa parhaista käytännöistä.

1. Vain soittokoukut React-toiminnoista

Sinun tulisi kutsua React Hooks vain React-toiminnoista. Jos yrität kutsua reaktiokoukkuja luokan komponentista, saat virheilmoituksen.

Tämä johtuu siitä, että voit kutsua React Hookia vain React-toiminnosta. React-funktiot ovat komponentteja, jotka määritetään funktion avainsanalla.

Tässä on esimerkki React-funktion komponentista:

tuonti Reagoi, { useState } alkaen "reagoi";
toimintoSovellus() {
konst [count, setCount] = useState(0);
palata (
<div>
<s>{Kreivi}</s>
<painike onClick={() => setCount (count + 1)}>
 Napsauta minua
</button>
</div>
 );
}

Ja tässä on esimerkki luokan komponentista:

tuonti Reagoi, { komponentti } alkaen "reagoi";
luokkaaSovellusulottuuKomponentti{
 tila = {
 määrä: 0
 };
render() {
palata (
<div>
<s>{this.state.count}</s>
<painike onClick={() => this.setState({ count: this.state.count + 1 })}>
 Napsauta minua
</button>
</div>
 );
 }
}

Ensimmäinen esimerkki ilmoittaa sovelluskomponentin funktion avainsanalla, kun taas toinen käyttää luokan avainsanaa.

2. Käytä vain yhtä useEffect Hook -koukkua

Jos käytät useEffect-koukkua, käytä vain yhtä komponenttia kohden. Tämä johtuu siitä, että useEffect suoritetaan aina, kun komponentti renderöityy.

Jos sinulla on useita useEffect-koukkuja, ne kaikki toimivat aina, kun komponentti renderöi. Tämä voi johtaa odottamattomiin käyttäytymis- ja suorituskykyongelmiin. Alla olevassa esimerkissä molemmat useEffects toimivat aina, kun sovelluskomponentti hahmonnetaan.

tuonti React, { useState, useEffect } alkaen "reagoi";
toimintoSovellus() {
konst [count, setCount] = useState(0);
useEffect(() => {
 console.log('Tämä suoritetaan aina, kun sovelluskomponentti hahmonnetaan!');
 }, []);
useEffect(() => {
 console.log('Tämä toimii myös aina, kun sovelluskomponentti hahmontuu!');
 }, []);
palata (
<div>
<s>{Kreivi}</s>
<painike onClick={() => setCount (count + 1)}>
 Napsauta minua
</button>
</div>
 );
}

Useiden useEffect-koukkujen käyttämisen sijaan voit käyttää yhtä useEffect-koukkua ja laittaa koko koodisi siihen. Alla olevassa esimerkissä vain yksi useEffect-koukku suoritetaan aina, kun sovelluskomponentti hahmonnetaan.

tuonti React, { useState, useEffect } alkaen "reagoi";
toimintoSovellus() {
konst [count, setCount] = useState(0);
useEffect(() => {
 console.log('Tämä suoritetaan aina, kun sovelluskomponentti hahmonnetaan!');
 console.log('Tämä toimii myös aina, kun sovelluskomponentti hahmontuu!');
 }, []);
palata (
<div>
<s>{Kreivi}</s>
<painike onClick={() => setCount (count + 1)}>
 Napsauta minua
</button>
</div>
 );
}

Tämä tarkoittaa, että voit kutsua React Hooksia vain ensimmäisestä esimerkistä. Jos yrität kutsua React Hooksia toisesta esimerkistä, saat virheilmoituksen.

3. Käytä koukkuja huipputasolla

Yksi React Hooksin parhaista käytännöistä on käyttää niitä huipputasolla. Sinun tulee välttää koukkujen käyttöä silmukoiden, ehtojen tai sisäkkäisten funktioiden sisällä. Jos esimerkiksi käytätStatea for-silmukan sisällä, React luo uuden tilamuuttujan joka kerta, kun silmukka suoritetaan. Tämä voi johtaa odottamattomaan käyttäytymiseen.

tuonti Reagoi, { useState } alkaen "reagoi";
toimintoSovellus() {
varten (antaa minä = 0; minä < 10; i++) {
// Älä tee tätä!
konst [count, setCount] = useState(0);
 }
palata (
<div>
<s>{Kreivi}</s>
<painike onClick={() => setCount (count + 1)}>
 Napsauta minua
</button>
</div>
 );
}

Yllä olevassa esimerkissä sovelluskomponentti renderöi aina vain laskurin ja painikkeen silmukan viimeisestä iteraatiosta alkaen. Tämä johtuu siitä, että React päivittää vain tilamuuttujan viimeisestä iteraatiosta.

Sen sijaan, että käyttäisit Tilaa silmukan sisällä, voit ilmoittaa tilamuuttujan silmukan ulkopuolella. Tällä tavalla React luo vain yhden tilamuuttujan ja päivittää sen vastaavasti.

tuonti Reagoi, { useState } alkaen "reagoi";
toimintoSovellus() {
// Tämä on oikea tapa käyttää useStatea silmukan sisällä
konst [count, setCount] = useState(0);
varten (antaa minä = 0; minä < 10; i++) {
// ...
 }
palata (
<div>
<s>{Kreivi}</s>
<painike onClick={() => setCount (count + 1)}>
 Napsauta minua
</button>
</div>
 );
}

4. Älä käytä liikaa koukkuja

React Hooks on tehokas työkalu, mutta sinun tulee välttää niiden liiallista käyttöä. Jos huomaat käyttäväsi useita koukkuja jokaisessa komponentissa, saatat käyttää niitä liikaa.

React Hookit ovat hyödyllisimpiä, kun sinun on jaettava tila useiden komponenttien välillä. Vältä tarpeettomia koukkuja, koska ne voivat tehdä koodistasi vaikeasti luettavan, ja ne voivat vaikuttaa suorituskykyyn, jos niitä käytetään liikaa.

Lisää toimintoja React 18 -koukkujen avulla

React 18:n julkaisun myötä saatavilla on uusia koukkuja. Jokainen koukku liittyy tiettyyn React-ominaisuuteen. Löydät luettelon kaikista saatavilla olevista koukuista Reactin verkkosivustolta. Mutta yleisimmin käytetyt koukut ovat edelleen useState ja useEffect.