Profitați la maximum de React Hooks cu aceste bune practici

Dacă sunteți nou la React, s-ar putea să vă întrebați ce sunt React Hooks și când ar trebui să le utilizați. React a introdus doar cârlige în versiunea sa 16.8, dar acestea au devenit rapid o caracteristică esențială a bibliotecii.

Aflați totul despre elementele de bază ale React Hooks și descoperiți câteva dintre cele mai bune practici pentru utilizarea acestora în aplicațiile dvs. React.

Ce sunt React Hooks?

React Hooks vă permit să utilizați funcții de stat și alte caracteristici React fără a scrie cod suplimentar. Cârligele sunt o modalitate excelentă de a vă face codul mai lizibil și mai ușor de întreținut.

Sunt cateva diferite Hooks în React, dar cele mai frecvent utilizate sunt useState și useEffect. Cârligul useState vă permite să adăugați stare componentelor dvs. Acest lucru este util pentru lucruri precum urmărirea intrărilor unui utilizator sau modificările unui formular. Cârligul useEffect vă permite să rulați o funcție ori de câte ori este redată o componentă. Acest lucru este util pentru lucruri precum preluarea datelor dintr-un API sau configurarea unui abonament.

Când ar trebui să utilizați React Hooks?

Ar trebui să utilizați React Hooks ori de câte ori trebuie să adăugați funcționalități suplimentare unei componente. De exemplu, dacă trebuie să țineți evidența intrărilor unui utilizator, veți folosi hook-ul useState. Dacă trebuie să preluați date dintr-un API, veți folosi cârligul useEffect. Poti de asemenea creați cârlige personalizate pentru apelurile API.

Dacă tocmai ați început să utilizați React, s-ar putea să nu fie nevoie să utilizați încă Hooks. Dar pe măsură ce creați aplicații mai complexe, veți descoperi că Hook-urile sunt o modalitate excelentă de a adăuga funcționalitate suplimentară componentelor dvs.

Cele mai bune practici cu React Hooks

Acum că știți ce sunt React Hooks și când să le folosiți, să vorbim despre câteva bune practici.

1. Numai cârlige de apel din funcțiile React

Ar trebui să apelați React Hooks numai din funcțiile React. Dacă încercați să apelați cârligele react dintr-o componentă de clasă, veți primi o eroare.

Acest lucru se datorează faptului că puteți apela doar un React Hook dintr-o funcție React. Funcțiile React sunt componente pe care le declarați cu un cuvânt cheie de funcție.

Iată un exemplu de componentă a funcției React:

import Reacționează, { useState } din 'reacţiona';
funcţieApp() {
const [count, setCount] = useState(0);
întoarcere (
<div>
<p>{numara}</p>
<butonul onClick={() => setCount (număr + 1)}>
 Click pe mine
</button>
</div>
 );
}

Și iată un exemplu de componentă de clasă:

import Reacționează, { Component } din 'reacţiona';
clasăAppse extindeComponentă{
 stare = {
 număr: 0
 };
randa() {
întoarcere (
<div>
<p>{this.state.count}</p>
<butonul onClick={() => this.setState({ count: this.state.count + 1 })}>
 Click pe mine
</button>
</div>
 );
 }
}

Primul exemplu declară componenta App folosind cuvântul cheie function, în timp ce al doilea folosește cuvântul cheie class.

2. Folosiți o singură utilizare Efect Hook

Dacă utilizați cârligul useEffect, ar trebui să utilizați doar unul pentru fiecare componentă. Acest lucru se datorează faptului că useEffect rulează ori de câte ori este redată o componentă.

Dacă aveți mai multe cârlige useEffect, toate se vor rula ori de câte ori se redă o componentă. Acest lucru poate duce la probleme de comportament și performanță neașteptate. În exemplul de mai jos, ambele useEffects vor rula ori de câte ori se redă componenta App.

import Reacționează, { useState, useEffect } din 'reacţiona';
funcţieApp() {
const [count, setCount] = useState(0);
useEffect(() => {
 console.log('Acesta va rula ori de câte ori componenta aplicației este redată!');
 }, []);
useEffect(() => {
 console.log('Acesta va rula și ori de câte ori se redă componenta aplicației!');
 }, []);
întoarcere (
<div>
<p>{numara}</p>
<butonul onClick={() => setCount (număr + 1)}>
 Click pe mine
</button>
</div>
 );
}

În loc să utilizați mai multe cârlige useEffect, puteți utiliza un singur cârlig useEffect și puteți pune tot codul în el. În exemplul de mai jos, un singur cârlig useEffect va rula ori de câte ori se redă componenta App.

import Reacționează, { useState, useEffect } din 'reacţiona';
funcţieApp() {
const [count, setCount] = useState(0);
useEffect(() => {
 console.log('Acesta va rula ori de câte ori componenta aplicației este redată!');
 console.log('Acesta va rula și ori de câte ori se redă componenta aplicației!');
 }, []);
întoarcere (
<div>
<p>{numara}</p>
<butonul onClick={() => setCount (număr + 1)}>
 Click pe mine
</button>
</div>
 );
}

Aceasta înseamnă că puteți apela React Hooks doar din primul exemplu. Dacă încercați să apelați React Hooks din al doilea exemplu, veți primi o eroare.

3. Utilizați cârlige la nivel superior

Una dintre cele mai bune practici cu React Hooks este să le folosiți la nivel superior. Ar trebui să evitați utilizarea cârligelor în bucle, condiții sau funcții imbricate. De exemplu, dacă utilizațiState în interiorul unei bucle for, de fiecare dată când bucla rulează, React va crea o nouă variabilă de stare. Acest lucru poate duce la un comportament neașteptat.

import Reacționează, { useState } din 'reacţiona';
funcţieApp() {
pentru (lăsa i = 0; eu < 10; i++) {
// Nu face asta!
const [count, setCount] = useState(0);
 }
întoarcere (
<div>
<p>{numara}</p>
<butonul onClick={() => setCount (număr + 1)}>
 Click pe mine
</button>
</div>
 );
}

În exemplul de mai sus, componenta App va reda numărul și butonul numai din iterația finală a buclei. Acest lucru se datorează faptului că React actualizează doar variabila de stare de la ultima iterație.

În loc să utilizațiState în interiorul unei bucle, puteți declara o variabilă de stare în afara buclei. În acest fel, React va crea o singură variabilă de stare și o va actualiza în consecință.

import Reacționează, { useState } din 'reacţiona';
funcţieApp() {
// Acesta este modul corect de a utiliza useState în interiorul unei bucle
const [count, setCount] = useState(0);
pentru (lăsa i = 0; eu < 10; i++) {
// ...
 }
întoarcere (
<div>
<p>{numara}</p>
<butonul onClick={() => setCount (număr + 1)}>
 Click pe mine
</button>
</div>
 );
}

4. Nu folosiți excesiv cârligele

React Hooks sunt un instrument puternic, dar ar trebui să evitați să le folosiți excesiv. Dacă te trezești că folosești mai multe Hook în fiecare componentă, s-ar putea să le exagerezi.

React Hooks sunt cele mai utile atunci când trebuie să partajați starea între mai multe componente. Evitați utilizarea Hook-urilor inutile, deoarece vă pot face codul greu de citit și pot afecta performanța dacă sunt folosite excesiv.

Adăugați mai multe funcționalități folosind React 18 Hooks

Odată cu lansarea React 18, există noi cârlige disponibile. Fiecare cârlig este specific unei anumite caracteristici React. Puteți găsi o listă cu toate cârligele disponibile pe site-ul web React. Dar cele mai frecvent utilizate cârlige sunt încă useState și useEffect.