We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

Állapot Horog használata

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React and include live examples:

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.

Hasznos volt ez az oldal?Az oldal szerkesztése