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

Horgok egy pillantásra

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

These new documentation pages teach React with Hooks:

A Horgok a React 16.8-as verziójában lettek hozzáadva. Osztályok létrehozása nélkül is lehetőséget kínálnak állapot, és más React funkciók használatához.

A horgok visszafelé kompatibilisek. Ez az oldal tapasztalt React felhasználóknak ad egy áttekintést a Horgokról. Ez egy gyorsütemű áttekintés. Ha összezavarodnál, keress egy ilyen sárga dobozt:

Részletes magyarázat

Olvasd el a Motiváció részt, hogy megértsd, miért is adjuk a Horgokat a Reacthez.

↑↑↑ Minden szekció egy ilyen sárga dobozzal végződik. Részletes magyarázatokat linkelnek.

📌 Állapot horog

Ez a példa egy számlálót renderel. A gombra kattintáskor növeli az értéket:

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

Itt, a useState egy Horog (mindjárt arról is beszélünk, hogy ez mit is jelent). Egy függvénykomponensben hívjuk meg, hogy ahhoz állapotot tudjunk rendelni. A React az újrarenderelések között megőrzi ezt az állapot. A useState egy párt ad vissza: a jelenlegi állapotértéket, és egy függvényt, amivel azt frissíteni tudjuk. Ezt a függvényt meghívhatod egy eseménykezelőből, vagy máshonnan is. Hasonló az osztályokban megtalálható this.setState-hez, kivéve, hogy ez nem egyesíti a régi és az új állapotokat. (Az Állapot Horog használata fejezetben mutatni fogunk egy példát, ami összehasonlítja a useState-t és a this.state-t.)

A useState egyetlen argumentuma az állapot kezdeti értéke. A fenti példában ez 0, mert a számlálónk nullától indul. Jegyezd meg, hogy a this.state-től eltérően az állapot itt nem egy objektum — bár lehetne, ha azt szeretnéd. A kezdeti állapot argumentum csupán az első renderelés alkalmával van használva.

Több állapotváltozó deklarálása

Az Állapot Horgot többször is használhatod egy komponensen belül:

function ExampleWithManyStates() {
  // Deklarálj egyszerre több állapotváltozót!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banán');
  const [todos, setTodos] = useState([{ text: 'Tanuld meg a Horgokat' }]);
  // ...
}

A tömb lebontó szintaxis lehetővé teszi számunkra különféle nevet adni a useState hívásakor a deklarált állapotváltozóknak. Ezek a nevek nem a useState API részei. Ehelyett a React feltételezi, hogy ha a useState-t többször is meghívod, akkor ezt minden renderelés során ugyanabban a sorrendben teszed. Később vissza fogunk térni arra, hogy ez miért működik, és mikor igazán hasznos.

De mi is egy Horog igazából?

A horgok függvények, amik “beleakaszkodnak” a React állapot és életciklus funkciókba függvénykomponensekből. A horgok nem működnek osztálykomponensekben — a React használatát teszik lehetővé, osztályok nélkül. (Meglévő komponensek átírását egyik napról a másikra nem ajánljuk, de új komponensekben elkezdhetsz Horgokat használni, ha szeretnéd.)

A React biztosít néhány beépített Horgot, mint a useState. Saját Horgokat is készíthetsz, ha állapotteljes viselkedést szeretnél különböző komponensek között megosztani. Először nézzük a beépített Horgokat.

Részletes magyarázat

Az Állapot Horogról az annak dedikált oldalon többet tanulhatsz: Állapot Horog használata.

⚡️ Hatás Horog

Valószínűleg hajtottál már végre adatlehívást, feliratkozást, vagy manuális DOM változást React komponensekből. Ezeket a műveleteket “mellékhatásoknak” (vagy röviden csak “hatásoknak”) hívjuk, mert más komponensekre is kihatással lehetnek, és renderelés közben nem elvégezhető műveletek.

A Hatás Horog, useEffect, mellékhatások elvégzését teszi lehetővé függvénykomponensekből. Ugyanazt a célt szolgálja mint a React osztálybeli componentDidMount, componentDidUpdate, és componentWillUnmount, de egy egyszerű API-be sűrítve. (A Hatás Horog használata fejezetben mutatni fogunk egy példát, ami összehasonlítja a useEffect-et ezekkel a metódusokkal.)

Például ez a komponens a dokumentum címét változtatja meg azután, hogy a React frissítette a DOM-ot:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Hasonló a componentDidMount és componentDidUpdate-hez:  useEffect(() => {    // A dokumentum címének frissítése a böngésző API segítségével    document.title = `${count} alkalommal kattintottál`;  });
  return (
    <div>
      <p>{count} alkalommal kattintottál</p>
      <button onClick={() => setCount(count + 1)}>
        Kattints rám
      </button>
    </div>
  );
}

Amikor meghívod a useEffect-et, azt közlöd a Reacttel, hogy az futtassa a “hatás” függvényed azután, hogy a változásokat eszközölte a DOM-on. A hatások a komponensen belül vannak deklarálva, hogy hozzáférjenek a propokhoz és az állapothoz. Alapértelmezés szerint a React minden renderelés után lefuttatja ezeket a hatásokat — beleértve az első renderelést is. (A Hatás Horog használata fejezetben beszélni fogunk arról, hogy ez hogyan hasonlítható össze az osztályok életciklusaival.)

A hatások opcionálisan azt is közölhetik, hogy hogyan “takarítsanak fel” maguk után egy függvény visszaadásával. Például ez a komponens egy hatást használ egy barát online státuszára való feliratkozásához, és arról való leiratkozással takarít fel maga után:

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);    return () => {      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    };  });
  if (isOnline === null) {
    return 'Betöltés...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Ebben a példában a React akkor iratkozik le a ChatAPI-ről, amikor a komponens leválik, valamint a hatás újrahívása előtt is, későbbi renderelések következtében. (Ha szeretnéd, létezik módja annak, hogy közöld a Reacttel az újrafeliratkozások átugrását, amennyiben a props.friend.id amit a ChatAPI-nek adtunk át nem változott.)

Ahogyan a useState esetében is, úgy több hatást is használhatsz egy komponensen belül:

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {    document.title = `${count} alkalommal kattintottál`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  // ...

A Horgok lehetővé teszik mellékhatások összerendezését egy komponensben a darabok összefüggését alapul véve (mint például feliratkozások hozzáadása, eltávolítása) ahelyett, hogy ezek feldarabolására kényszerülnél az életciklus metódusok miatt.

Részletes magyarázat

A Hatás Horogról az annak dedikált oldalon többet tanulhatsz: Hatás Horog használata.

✌️ A horgok szabályai

A horgok JavaScript függvények, de további két szabályt szabnak meg:

  • Horgokat csakis a legfelsőbb szinten hívj meg. Ne hívj meg horgokat ciklusokban, feltételes ágakban, vagy egymásba ágyazott függvényekben.
  • Horgokat csakis React függvénykomponensekből hívj meg. Ne hívj meg horgokat általános JavaScript függvényekből. (Csakis egy másik helye létezik a horgok szabályos meghívásának — a saját, egyedi horgaidban. Ezekről nemsokára tanulni fogunk.)

Szolgáltatunk egy linter plugint, ami ezen szabályok automatikus betartására kényszerít. Megértjük, ha ezek a szabályok elsőre korlátozónak és összezavarónak tűnnek, de alapvetőek a horgok helyes működéséhez.

Részletes magyarázat

Ezekről a szabályokról az ezeknek dedikált oldalon többet tanulhatsz: Horgok szabályai.

💡 Készítsd el a saját horgod

Néha szeretnénk állapotteljes logikát megosztani komponensek között. Hagyományosan ennek a problémának két népszerű megoldása létezett: felsőbb rendű komponensek és render propok. Az egyedi horgok ezt a problémát oldják meg, extra komponensek a komponensfádhoz való hozzáadása nélkül.

Korábban ezen az oldalon bemutattuk a FriendStatus komponenst ami meghívja a useState és useEffect horgokat egy barát online státuszára való feliratkozáshoz. Tegyük fel, hogy egy másik komponensben újra fel szeretnénk használni a feliratkozó logikát.

Először is kivonjuk a logikát egy egyedi horogba, amit useFriendStatus-nak hívunk:

import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

Ez egy friendID-t fogad argumentumként, és a barátunk online állapotát adja vissza.

Így már mindkét komponensben használhatjuk:

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);
  if (isOnline === null) {
    return 'Betöltés...';
  }
  return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

Ezen komponensek állapota egymástól teljesen független. A horgok az állapotteljes logika újrafelhasználásának egy módja, nem maguknak az állapotoknak. Valójában minden egyes horog meghívás állapota teljesen elzárt — szóval akár ugyanazt az egyedi horgot kétszer is használhatod egy komponensen belül.

Az egyedi horgok sokkal inkább egy közös egyezmény eredményei, mint egy egyedi funkció. Ha egy függvény neve a ”use” szóval kezdődik, és más horgokat hív meg, akkor azt mondjuk, hogy az egy egyedi horog. A useSomething elnevezési gyakorlat a módja, ami lehetővé teszi a linter pluginunknak horgokat használó kódban hibákat találni.

Írhatsz egyedi horgokat, ami a felhasználási esetek egy széles skáláját fedi le, mint például űrlapok kezelése, animációk, deklaratív feliratkozások, időzítők, és valószínűleg sok más eset, amiket nem vettünk figyelembe. Izgatottan figyeljük, hogy a React közösség milyen egyedi horgokkal rukkol elő.

Részletes magyarázat

Az egyedik horgokról az ennek dedikált oldalon többet tanulhatsz: Saját horgok készítése.

🔌 Egyéb horgok

Van néhány kevésbé használt beépített horog is, amit hasznosnak találhatsz. Például a useContext lehetővé teszi a React kontextusokra való feliratkozást, egymásba ágyazások nélkül:

function Example() {
  const locale = useContext(LocaleContext);  const theme = useContext(ThemeContext);  // ...
}

És a useReducer, ami komplex komponensek állapotának kezelését teszi lehetővé reducer-ek segítségével:

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);  // ...

Részletes magyarázat

Minden beépített horogról az ennek dedikált oldalon többet tanulhatsz: Horgok API referencia.

Következő lépések

Hűha, ez gyors volt! Ha néhány dolog nem teljesen volt világos, vagy részletesebben szeretnél valamiről tanulni, elolvashatod a következő oldalakat, kezdve az Állapot Horog dokumentációjával.

Megnézheted a Horgok API referencia oldalát, és a Horgok GY.I.K. oldalát is.

Végezetül ne hagyd ki a bemutató oldalt, ami a horgok hozzáadásának a miértjét magyarázza el, és hogy hogyan fogjuk őket osztályok mellett használni — az alkalmazásaink átírása nélkül.

Hasznos volt ez az oldal?Az oldal szerkesztése