Ha még nem ismeri a Reactot, akkor felmerülhet a kérdés, hogy mik azok a React Hookok, és mikor érdemes használni őket. A React csak a 16.8-as kiadásában vezette be a horgokat, de gyorsan a könyvtár alapvető jellemzőjévé váltak.

Tanuljon meg mindent a React Hooks alapjairól, és fedezzen fel néhány bevált gyakorlatot a React alkalmazásaiban való használatukra.

Mik azok a React Hookok?

A React Hooks lehetővé teszi az állapot és egyéb React funkciók használatát extra kód írása nélkül. A horgok nagyszerű módja annak, hogy a kódot olvashatóbbá és karbantarthatóbbá tegye.

Van néhány különböző horgok a Reactban, de a leggyakrabban használt a useState és a useEffect. A useState hook segítségével állapotot adhat hozzá az összetevőihez. Ez olyan esetekben hasznos, mint például a felhasználó által bevitt adatok nyomon követése vagy az űrlapok változásai. A useEffect hook lehetővé teszi egy függvény futtatását, amikor egy komponens renderelődik. Ez olyan esetekben hasznos, mint például adatok lekérése API-ból vagy előfizetés beállítása.

instagram viewer

Mikor érdemes React Hook-ot használni?

Használja a React Hooks alkalmazást, amikor további funkciókat kell hozzáadnia egy összetevőhöz. Például, ha nyomon kell követnie egy felhasználó bevitelét, használja a useState hook-ot. Ha adatokat kell lekérnie egy API-ból, használja a useEffect hook-ot. Te is egyéni hookok létrehozása API-hívásokhoz.

Ha most kezdte el használni a Reactot, előfordulhat, hogy még nincs szüksége a Hooks használatára. De ahogy bonyolultabb alkalmazásokat készít, rá fog jönni, hogy a Hooks nagyszerű módja annak, hogy további funkciókat adjon összetevőihez.

A React Hooks bevált gyakorlatai

Most, hogy tudja, mik azok a React Hook, és mikor kell használni őket, beszéljünk néhány bevált gyakorlatról.

1. Csak a React Funkciók hívóhorogjai

A React Hookokat csak a React függvényekből szabad meghívni. Ha megpróbálja hívni a react hook-okat egy osztálykomponensből, hibaüzenetet fog kapni.

Ennek az az oka, hogy React Hook-ot csak React függvényből hívhat meg. A React függvények olyan összetevők, amelyeket függvény kulcsszóval deklarál.

Íme egy példa a React függvény összetevőjére:

import React, { useState } tól től 'reagál';
funkcióApp() {
const [count, setCount] = useState(0);
Visszatérés (
<div>
<p>{számol}</p>
<gomb onClick={() => setCount (count + 1)}>
 Kattints ide
</button>
</div>
 );
}

És itt van egy példa egy osztálykomponensre:

import React, { Component } tól től 'reagál';
osztályAppkiterjedÖsszetevő{
 állapot = {
 szám: 0
 };
Vakol() {
Visszatérés (
<div>
<p>{this.state.count}</p>
<gomb onClick={() => this.setState({ count: this.state.count + 1 })}>
 Kattints ide
</button>
</div>
 );
 }
}

Az első példa az App komponenst a function kulcsszóval deklarálja, míg a második az osztály kulcsszót használja.

2. Csak egy UseEffect Hook-ot használjon

Ha a useEffect hook-ot használja, akkor komponensenként csak egyet használjon. Ennek az az oka, hogy a useEffect mindig lefut, amikor egy komponens renderelődik.

Ha több useEffect hook-ja van, akkor mindegyik lefut, amikor egy komponens renderelődik. Ez váratlan viselkedési és teljesítményproblémákhoz vezethet. Az alábbi példában mindkét useEffects futni fog, amikor az App komponens megjelenik.

import React, { useState, useEffect } tól től 'reagál';
funkcióApp() {
const [count, setCount] = useState(0);


useEffect(() => {
 console.log('Ez minden alkalommal futni fog, amikor az App komponens megjelenik!');
 }, []);


useEffect(() => {
 console.log('Ez akkor is futni fog, amikor az App komponens megjelenik!');
 }, []);
Visszatérés (
<div>
<p>{számol}</p>
<gomb onClick={() => setCount (count + 1)}>
 Kattints ide
</button>
</div>
 );
}

Ahelyett, hogy több useEffect hook-ot használna, használhat egyetlen useEffect hook-ot, és az összes kódot abba helyezheti. Az alábbi példában csak egy useEffect hook fut le, amikor az App komponens megjelenik.

import React, { useState, useEffect } tól től 'reagál';
funkcióApp() {
const [count, setCount] = useState(0);


useEffect(() => {
 console.log('Ez minden alkalommal futni fog, amikor az App komponens megjelenik!');
 console.log('Ez akkor is futni fog, amikor az App komponens megjelenik!');
 }, []);
Visszatérés (
<div>
<p>{számol}</p>
<gomb onClick={() => setCount (count + 1)}>
 Kattints ide
</button>
</div>
 );
}

Ez azt jelenti, hogy csak az első példából hívhatja meg a React Hook-ot. Ha megpróbálja meghívni a React Hooks-ot a második példából, hibaüzenetet fog kapni.

3. Használjon horgokat a legfelső szinten

A React Hooks egyik legjobb gyakorlata, hogy a legfelső szinten használja őket. Kerülje a hurkok, feltételek vagy beágyazott függvényeken belüli horgok használatát. Például, ha egy for cikluson belül használja az Állapot értéket, a ciklus minden egyes lefutásakor a React új állapotváltozót hoz létre. Ez váratlan viselkedéshez vezethet.

import React, { useState } tól től 'reagál';
funkcióApp() {
számára (hagyja i = 0; én < 10; i++) {
// Ne csináld ezt!
const [count, setCount] = useState(0);
 }
Visszatérés (
<div>
<p>{számol}</p>
<gomb onClick={() => setCount (count + 1)}>
 Kattints ide
</button>
</div>
 );
}

A fenti példában az App összetevő csak a ciklus utolsó iterációjától jeleníti meg a számlálót és a gombot. Ennek az az oka, hogy a React csak az utolsó iteráció állapotváltozóját frissíti.

A cikluson belüli állapot használata helyett deklarálhat egy állapotváltozót a cikluson kívül. Így a React csak egy állapotváltozót hoz létre, és ennek megfelelően frissíti azt.

import React, { useState } tól től 'reagál';
funkcióApp() {
// Ez a helyes módja a useState használatának egy cikluson belül
const [count, setCount] = useState(0);


számára (hagyja i = 0; én < 10; i++) {
// ...
 }
Visszatérés (
<div>
<p>{számol}</p>
<gomb onClick={() => setCount (count + 1)}>
 Kattints ide
</button>
</div>
 );
}

4. Ne használja túl a horgokat

A React Hook hatékony eszköz, de kerülje a túlzott használatát. Ha úgy találja, hogy minden komponensben több horgot használ, akkor lehet, hogy túlzottan használja őket.

A React Hookok akkor a leghasznosabbak, ha több összetevő között kell megosztani az állapotot. Kerülje a szükségtelen Hookok használatát, mert ezek megnehezíthetik a kód olvashatóságát, és túlzott használat esetén befolyásolhatják a teljesítményt.

További funkciók hozzáadása a React 18 horgokkal

A React 18 megjelenésével új horgok állnak rendelkezésre. Minden horog egy bizonyos React jellemzőre vonatkozik. Az összes elérhető horog listája megtalálható a React webhelyén. De a leggyakrabban használt horgok továbbra is a useState és a useEffect.