A Horgok a React egy új kiegészítése a 16.8-as verziótól kezdve. Lehetővé teszik számodra állapotok és más React funkciók használatát osztályok írása nélkül.

A bevezető ezt a példát használta a Horgok bemutatására:

import React, { useState } from 'react'
 
function Example() {
  // Egy új állapotváltozó deklarálása, amit "count"-nak nevezünk el
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>{count} alkalommal kattintottál</p>
      <button onClick={() => setCount(count + 1)}>Kattints rám</button>
    </div>
  )
}

A Horgok bevezetéseképpen először ezt a kódot fogjuk összehasonlítani egy osztályok segítségével írt megfelelőjével:

Osztállyal írt ekvivalens

Ha már használtál React osztályokat, ez a kód ismerősnek tűnhet:

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }
 
  render() {
    return (
      <div>
        <p>{this.state.count} alkalommal kattintottál</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Kattints rám</button>
      </div>
    )
  }
}

Az állapot először { count: 0 } értéket vesz fel, ezután megnöveljük a state.count értékét, amikor a felhasználó rákattint a gombra, a this.setState() meghívásával. A későbbiekben ebből az osztályból fogunk idézni.

Megjegyzés

Esetleg elgondolkozhattál azon, hogy miért egy számlálót használunk itt egy realisztikusabb példa helyett. Ez azért van, hogy az API-ra tudjunk fókuszálni, amíg még csak ismerkedünk a Horgokkal.

Horgok és függvénykomponensek

Emlékeztetőül, a függvénykomponensek így néznek ki Reactben:

const Example = (props) => {
  // Itt használhatsz Horgokat!
  return <div />
}

vagy így:

function Example(props) {
  // Itt használhatsz Horgokat!
  return <div />
}

Ezeket előzőleg "állapot nélküli komponenseknek" hívtuk. Mostantól kezdve viszont már használhatsz állapotot is ezekben, így ezentúl inkább "függvénykomponensekként" hivatkozunk rájuk.

A Horgok nem működnek osztályokon belül. De használhatod őket osztályok helyett.

Mi is a Horog?

Az új példánk a useState Horog importálásával kezdődik:

import React, { useState } from 'react'
 
function Example() {
  // ...
}

Mi is a Horog? A Horog egy speciális függvény, aminek a segítségével "beleakaszkodhatsz" React funkciókba. Például a useState egy olyan Horog, aminek a segítségével állapotot adhatsz hozzá a függvénykomponensekhez. Később többféle Horgot is megvizsgálunk.

Mikor használjak Horgokat? Ha van egy függvénykomponensed, amihez állapotot szeretnél hozzáadni, előzőleg osztállyá kellett konvertálnod. Mostantól kezdve viszont Horgokat is használhatsz ehelyett a meglévő függvénykomponensben. Most ezt fogjuk kipróbálni!

Megjegyzés

Van néhány speciális szabály, hogy hol és hogyan használhatsz Horgokat egy komponensen belül. Ezekről a Horgok szabályai fejezetben tanulunk majd.

Állapotváltozó deklarálása

Egy osztályban a count állapotváltozó 0-ra inicializálása a this.state { count: 0 }-ra állításával történik a konstruktorban:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    count: 0
  };
}

Egy függvénykomponensben nincs this, így nem tudjuk beállítani vagy kiolvasni a this.state-et. Ehelyett közvetlenül a useState Horgot hívjuk meg a komponensben:

import React, { useState } from 'react';
 
function Example() {
// Egy új állapotváltozó deklarálása, amit "count"-nak nevezünk el
const [count, setCount] = useState(0);

Mit csinál a useState hívás? Ez egy "állapotváltozót" deklarál. A mi változónkat count-nak hívják, de bármi másnak is elnevezhetjük, például banana. Ez egy módszer az értékek "megőrzésére" a függvényhívások között — a useState egy új módszer ugyanarra, amit a this.state-tel érünk el az osztályokban. Normális esetben a változók "eltűnnek" a függvény hívásának befejezésekor, de az állapotváltozókat a React megőrzi.

Mit adunk át argumentumként a useState-nek? Az egyetlen argumentum a useState() Horogban a kezdeti állapot. Az osztályokkal ellentétben az állapotváltozónak nem kell objektumnak lennie. Használhatunk egy sima számot vagy sztringet, ha csak erre van épp szükségünk. A fenti példánkban csak egy számra van szükségünk a felhasználói kattintások számának tárolására, így 0-t adunk meg kezdeti értékként. (Ha két különböző értéket szeretnénk tárolni az állapotban, a useState()-et kétszer hívnánk meg.)

Mit ad vissza a useState? Két értéket ad vissza: a jelenlegi állapotváltozót és egy függvényt, amivel ezt frissíteni tudjuk. Ezért írjuk így: const [count, setCount] = useState(). Ez hasonló a this.state.count és this.setState-hez egy osztályban, kivéve, hogy ezek párban érkeznek. Ha még nem barátkoztál meg ezzel a szintaxissal, vissza fogunk erre térni az oldal alján.

Most, hogy tudjuk, hogy mit csinál a useState Horog, a példánk jobban érthető:

import React, { useState } from 'react';
 
function Example() {
// Egy új állapotváltozó deklarálása, amit "count"-nak fogunk hívni
const [count, setCount] = useState(0);

Egy count állapotváltozót deklarálunk és 0-ra állítjuk. A React megjegyzi az értékét a renderelések között, és a legfrissebb értéket adja át függvényünknek. Ha meg szeretnénk változtatni a count értékét, meghívhatjuk a setCount-ot.

Megjegyzés

Esetleg ezen tűnődhetsz: a useState-et miért nem createState-nek hívjuk?

A "Create" (létrehozás) nem lenne teljesen pontos megnevezés, mivel az állapot csak az első renderelés alkalmával hozódik létre. A későbbi renderelésekkor a useState a legfrissebb állapotot adja vissza. Különben nem lenne "állapot"! Egy másik oka is van, hogy a Horog nevek miért mindig use-zal kezdődnek. Hogy miért, arról a Horgok szabályai részben tanulunk majd.

Az állapot kiolvasása

Ha a jelenlegi count értéket szeretnénk kiolvasni egy osztályban, a this.state.count-et olvassuk:

<p>{this.state.count} alkalommal kattintottál</p>

Egy függvényben a count változót közvetlenül tudjuk használni:

<p>{count} alkalommal kattintottál</p>

Az állapot módosítása

Egy osztályban a count változót a this.setState() meghívásával tudjuk módosítani:

<button onClick={() => this.setState({ count: this.state.count + 1 })}>Kattints rám</button>

Egy függvényben már van setCount és count változónk, így nincs szükségünk a this-re:

<button onClick={() => setCount(count + 1)}>Kattints rám</button>

Összefoglalás

Most összegezzünk, hogy mit tanultunk eddig sorról-sorra és figyeljük meg, hogy mindent értünk-e.

1: import React, { useState } from 'react';
2:
3: function Example() {
4: const [count, setCount] = useState(0);
5:
6: return (
7: <div>
8: <p>{count} alkalommal kattintottál</p>
9: <button onClick={() => setCount(count + 1)}>
10: Kattints rám
11: </button>
12: </div>
13: );
14: }

• 1. sor: A useState Horgot beimportáljuk Reactből. Ennek a segítségével helyi állapotot tarthatunk a függvénykomponensünkben.

• 4. sor: Az Example komponensben egy új állapotváltozót deklarálunk a useState Horog meghívásával. Ez egy pár változót ad vissza, amit most el fogunk nevezni. A első változót count-nak hívjuk, mivel ez tárolja a kattintások számát. 0-ként inicializáljuk, amit a useState egyetlen argumentumaként adunk át. A második kapott változó egy függvény. Ezzel fogjuk módosítani a count változót, ezért ezt setCount-nak hívjuk.

• 9. sor: Amikor a felhasználó a gombra kattint, meghívjuk a setCount-ot az új értékkel. Ezután a React újrarendereli az Example komponenst a count új értékével.

Elképzelhető, hogy ez kezdésképpen túl sok információ egyszerre. Ne siesd el! Ha elvesztél a magyarázatban, nézd meg újra a fenti kódot és próbáld kiolvasni fentről lefelé. Megígérjük, hogy amint megpróbálod "elfelejteni", hogy hogyan működik az állapot az osztályokban és friss szemekkel nézel erre a példára, máris értelmet fog nyerni.

Tipp: Mit jelentenek a szögletes zárójelek?

Már valószínűleg észrevetted a szögletes zárójeleket, amikor egy állapotváltozót deklarálunk:

const [count, setCount] = useState(0)

A baloldali nevek nem részei a React API-nek. Ezeket bárhogy hívhatod:

const [fruit, setFruit] = useState('banana')

Ezt a JavaScript szintaxist "tömb lebontásnak" hívjuk. Ez azt jelenti, hogy két új változót csinálunk, ami fruit és setFruit lesz, ahol a fruit az első értéke lesz annak, amit a useState visszaad és setFruit a második. Ez ekvivalens ezzel a kóddal:

var fruitStateVariable = useState('banana') // Egy párt ad vissza
var fruit = fruitStateVariable[0] // Az első változó
var setFruit = fruitStateVariable[1] // A második változó

Amikor useState-tel deklarálunk egy új állapotváltozót, egy párt fog visszaadni — egy tömböt két elemmel. Az első elem a jelenlegi érték, a második egy függvény, amivel az értéket módosíthatjuk. A [0] és [1] használata kissé zavaró, mivel ennek sajátos jelentése van. Ezért inkább a tömb lebontást használjuk.

Megjegyzés

Lehet, hogy kíváncsi vagy, hogy honnan tudja a React, hogy melyik useState hívás melyik komponensnek felel meg, mivel nem adunk át semmiféle this-t a Reactnek. Ezt a kérdést itt fogjuk megválaszolni több más kérdéssel együtt a GY.I.K. oldalon.

Tipp: Több állapotváltozó használata

Állapotváltozók [something, setSomething] párként való definiálása azért is hasznos, mivel különböző neveket tudunk adni különböző állapotváltozóknak, ha többet is szeretnénk használni:

function ExampleWithManyStates() {
// Több állapotváltozó deklarálása!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

A fenti komponensben van egy age, fruit és todos lokális változónk, és külön-külön tudjuk ezeket módosítani:

function handleOrangeClick() {
  // Hasonló a this.setState({ fruit: 'orange' })-hez
  setFruit('orange')
}

Nem kell több változót használnod. Az állapotváltozók objektumokat és tömböket is tudnak tárolni, így az összetartozó adatokat egy helyen tudod tárolni. Viszont az osztálybeli this.setState-tel ellentétben a módosítás mindig lecseréli az állapotot az összefésülés helyett.

Több ajánlást is olvashatsz a független állapotváltozók felosztásáról a GY.I.K.-ben.

Következő lépések

Ezen az oldalon az egyik React által szolgáltatott Horogról tanultuk, amit useState-nek hívnak. Néha úgy is fogunk erre hivatkozni, mint az "Állapot Horog". Ezáltal helyi állapotot tudunk a függvénykomponensekhez adni — amit most először csináltunk!

Arról is tanultunk egy kicsit, hogy mik azok a Horgok. A Horgok függvények, amikkel "beleakaszkodhatsz" React funkciókba a függvénykomponensekből. A nevük mindig use-zal kezdődik és vannak még egyéb Horgok is, amikről még nem esett szó.

Most folytassuk a következő Horog megtanulásával: useEffect. Ezzel mellékhatásokat végezhetsz el egy komponensben és hasonló az osztálybeli életciklus metódusokhoz.