Nende parimate tavade abil saate React Hookidest maksimumi võtta

Kui olete Reacti uus kasutaja, võite küsida, mis on React Hooks ja millal peaksite neid kasutama. React tutvustas konkse ainult oma versioonis 16.8, kuid neist on kiiresti saanud raamatukogu oluline funktsioon.

Õppige kõike React Hooksi põhitõdede kohta ja avastage mõned parimad tavad nende kasutamiseks oma Reacti rakendustes.

Mis on React Hooks?

React Hooks võimaldab teil kasutada olekut ja muid Reacti funktsioone ilma lisakoodi kirjutamata. Konksud on suurepärane viis koodi loetavamaks ja hooldatavamaks muutmiseks.

Neid on vähe erinevad konksud Reactis, kuid kõige sagedamini kasutatavad on useState ja useEffect. Konks useState võimaldab teil komponentidele olekut lisada. See on kasulik näiteks kasutaja sisendi või vormi muudatuste jälgimiseks. Konks useEffect võimaldab teil funktsiooni käivitada alati, kui komponent renderdab. See on kasulik näiteks API-st andmete toomiseks või tellimuse seadistamiseks.

Millal peaksite React Hooks kasutama?

Peaksite kasutama React Hooksi alati, kui peate komponendile lisafunktsioone lisama. Näiteks kui teil on vaja jälgida kasutaja sisendit, peaksite kasutama konksu useState. Kui teil on vaja API-st andmeid hankida, kasutage konksu useEffect. Sa saad ka

luua kohandatud konksud API kõnede jaoks.

Kui alustasite äsja Reacti kasutamist, ei pruugi te veel Hooksi kasutada. Kuid keerukamate rakenduste loomisel avastate, et Hooks on suurepärane viis komponentidele lisafunktsioonide lisamiseks.

React Hookide parimad tavad

Nüüd, kui teate, mis on React Hooks ja millal neid kasutada, räägime mõnest parimast tavast.

1. Ainult reageerimisfunktsioonide kõnekonksud

React Hooks tuleks helistada ainult funktsioonide React kaudu. Kui proovite kutsuda klassikomponendist reageerimiskonksu, saate veateate.

Seda seetõttu, et React Hooki saate helistada ainult funktsiooni React kaudu. Reageerimisfunktsioonid on komponendid, mille deklareerite funktsiooni märksõnaga.

Siin on näide funktsiooni React komponendist:

importida Reageerige, { useState } alates 'reageerida';
funktsiooniRakendus() {
konst [count, setCount] = useState(0);
tagasi (
<div>
<lk>{count}</lk>
<nupp onClick={() => setCount (count + 1)}>
 Klõpsake mind
</button>
</div>
 );
}

Ja siin on näide klassi komponendist:

importida Reageerige, { komponent } alates 'reageerida';
klassRakendusulatubKomponent{
 olek = {
 arv: 0
 };
render() {
tagasi (
<div>
<lk>{this.state.count}</lk>
<nupp onClick={() => this.setState({ count: this.state.count + 1 })}>
 Klõpsake mind
</button>
</div>
 );
 }
}

Esimene näide deklareerib rakenduse komponendi funktsiooni märksõna abil, samas kui teine ​​​​kasutab klassi märksõna.

2. Kasutage ainult ühte useEffect Hooki

Kui kasutate konksu useEffect, peaksite kasutama ainult ühte komponendi kohta. Seda seetõttu, et useEffect töötab alati, kui komponent renderdab.

Kui teil on mitu useEffecti konksu, käivituvad need kõik alati, kui komponent renderdab. See võib põhjustada ootamatuid käitumis- ja jõudlusprobleeme. Allolevas näites käitatakse mõlemad useEffects rakenduse komponendi renderdamisel.

importida Reageerida, { useState, useEffect } alates 'reageerida';
funktsiooniRakendus() {
konst [count, setCount] = useState(0);
useEffect(() => {
 console.log('See töötab alati, kui rakenduse komponent renderdab!');
 }, []);
useEffect(() => {
 console.log('See töötab ka alati, kui rakenduse komponent renderdab!');
 }, []);
tagasi (
<div>
<lk>{count}</lk>
<nupp onClick={() => setCount (count + 1)}>
 Klõpsake mind
</button>
</div>
 );
}

Mitme useEffecti konksu kasutamise asemel saate kasutada ühte useEffecti konksu ja panna kogu oma koodi sellesse. Allolevas näites töötab rakenduse komponendi renderdamisel alati ainult üks useEffecti konks.

importida Reageerida, { useState, useEffect } alates 'reageerida';
funktsiooniRakendus() {
konst [count, setCount] = useState(0);
useEffect(() => {
 console.log('See töötab alati, kui rakenduse komponent renderdab!');
 console.log('See töötab ka alati, kui rakenduse komponent renderdab!');
 }, []);
tagasi (
<div>
<lk>{count}</lk>
<nupp onClick={() => setCount (count + 1)}>
 Klõpsake mind
</button>
</div>
 );
}

See tähendab, et saate helistada React Hooksile ainult esimesest näitest. Kui proovite helistada React Hooksile teisest näitest, kuvatakse veateade.

3. Kasutage konkse tipptasemel

Üks React Hooksi parimaid tavasid on kasutada neid tipptasemel. Peaksite vältima konksude kasutamist silmuste, tingimuste või pesastatud funktsioonide sees. Näiteks kui kasutate for-tsüklis olekutState, loob React iga kord, kui silmus töötab, uue olekumuutuja. See võib viia ootamatu käitumiseni.

importida Reageerige, { useState } alates 'reageerida';
funktsiooniRakendus() {
jaoks (lase i = 0; ma < 10; i++) {
// Ära tee seda!
konst [count, setCount] = useState(0);
 }
tagasi (
<div>
<lk>{count}</lk>
<nupp onClick={() => setCount (count + 1)}>
 Klõpsake mind
</button>
</div>
 );
}

Ülaltoodud näites renderdab rakenduse komponent loenduse ja nupu ainult tsükli viimasest iteratsioonist. Seda seetõttu, et React värskendab ainult viimase iteratsiooni olekumuutujat.

Selle asemel, et kasutada tsüklis olekut, saate deklareerida olekumuutuja väljaspool ahelat. Nii loob React ainult ühe olekumuutuja ja värskendab seda vastavalt.

importida Reageerige, { useState } alates 'reageerida';
funktsiooniRakendus() {
// See on õige viis kasutada tsüklis useState
konst [count, setCount] = useState(0);
jaoks (lase i = 0; ma < 10; i++) {
// ...
 }
tagasi (
<div>
<lk>{count}</lk>
<nupp onClick={() => setCount (count + 1)}>
 Klõpsake mind
</button>
</div>
 );
}

4. Ärge kasutage konkse üle

React Hooks on võimas tööriist, kuid te peaksite vältima nende ülekasutamist. Kui leiate, et kasutate igas komponendis mitut konksu, võite neid liialdada.

Reaktsioonikonksud on kõige kasulikumad, kui teil on vaja olekut jagada mitme komponendi vahel. Vältige tarbetute konksude kasutamist, kuna need võivad muuta teie koodi raskesti loetavaks ja võivad liigsel kasutamisel mõjutada jõudlust.

Lisage rohkem funktsioone React 18 konksude abil

React 18 väljalaskmisega on saadaval uued konksud. Iga konks on spetsiifiline teatud Reacti funktsiooni jaoks. Kõigi saadaolevate konksude loendi leiate veebisaidilt React. Kuid kõige sagedamini kasutatavad konksud on endiselt useState ja useEffect.