\n\nThese docs are old and won’t be updated. Go to react.dev for the new React docs.
\nThese new documentation pages teach React with Hooks:
\n\n
\n- Quick Start
\n- Tutorial
\n- \n
react: 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.
\nA 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:
\n\n\nRészletes magyarázat
\nOlvasd el a Motiváció részt, hogy megértsd, miért is adjuk a Horgokat a Reacthez.
\n
↑↑↑ Minden szekció egy ilyen sárga dobozzal végződik. Részletes magyarázatokat linkelnek.
\nEz a példa egy számlálót renderel. A gombra kattintáskor növeli az értéket:
\nimport React, { useState } from 'react';\nfunction Example() {\n // Egy új állapot változó deklarálása, amit \"count\"-nak fogunk hívni const [count, setCount] = useState(0);\n return (\n <div>\n <p>{count} alkalommal kattintottál</p>\n <button onClick={() => setCount(count + 1)}>\n Kattints rám\n </button>\n </div>\n );\n}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.
Az Állapot Horgot többször is használhatod egy komponensen belül:
\nfunction ExampleWithManyStates() {\n // Deklarálj egyszerre több állapotváltozót!\n const [age, setAge] = useState(42);\n const [fruit, setFruit] = useState('banán');\n const [todos, setTodos] = useState([{ text: 'Tanuld meg a Horgokat' }]);\n // ...\n}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.
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.)
\nA 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.
\n\nRészletes magyarázat
\nAz Állapot Horogról az annak dedikált oldalon többet tanulhatsz: Állapot Horog használata.
\n
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.
\nA 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:
\nimport React, { useState, useEffect } from 'react';\nfunction Example() {\n const [count, setCount] = useState(0);\n\n // 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`; });\n return (\n <div>\n <p>{count} alkalommal kattintottál</p>\n <button onClick={() => setCount(count + 1)}>\n Kattints rám\n </button>\n </div>\n );\n}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:
\nimport React, { useState, useEffect } from 'react';\n\nfunction FriendStatus(props) {\n const [isOnline, setIsOnline] = useState(null);\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n\n useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; });\n if (isOnline === null) {\n return 'Betöltés...';\n }\n return isOnline ? 'Online' : 'Offline';\n}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) {\n const [count, setCount] = useState(0);\n useEffect(() => { document.title = `${count} alkalommal kattintottál`;\n });\n\n const [isOnline, setIsOnline] = useState(null);\n useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n };\n });\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n // ...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.
\n\n\nRészletes magyarázat
\nA Hatás Horogról az annak dedikált oldalon többet tanulhatsz: Hatás Horog használata.
\n
A horgok JavaScript függvények, de további két szabályt szabnak meg:
\nSzolgá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.
\n\n\nRészletes magyarázat
\nEzekről a szabályokról az ezeknek dedikált oldalon többet tanulhatsz: Horgok szabályai.
\n
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.
\nKorá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';\n\nfunction useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null);\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);\n };\n });\n\n return isOnline;\n}Ez egy friendID-t fogad argumentumként, és a barátunk online állapotát adja vissza.
Így már mindkét komponensben használhatjuk:
\nfunction FriendStatus(props) {\n const isOnline = useFriendStatus(props.friend.id);\n if (isOnline === null) {\n return 'Betöltés...';\n }\n return isOnline ? 'Online' : 'Offline';\n}function FriendListItem(props) {\n const isOnline = useFriendStatus(props.friend.id);\n return (\n <li style={{ color: isOnline ? 'green' : 'black' }}>\n {props.friend.name}\n </li>\n );\n}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.
\nAz 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ő.
\n\n\nRészletes magyarázat
\nAz egyedik horgokról az ennek dedikált oldalon többet tanulhatsz: Saját horgok készítése.
\n
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() {\n const locale = useContext(LocaleContext); const theme = useContext(ThemeContext); // ...\n}És a useReducer, ami komplex komponensek állapotának kezelését teszi lehetővé reducer-ek segítségével:
function Todos() {\n const [todos, dispatch] = useReducer(todosReducer); // ...\n\nRészletes magyarázat
\nMinden beépített horogról az ennek dedikált oldalon többet tanulhatsz: Horgok API referencia.
\n
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.
\nMegnézheted a Horgok API referencia oldalát, és a Horgok GY.I.K. oldalát is.
\nVé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.
","frontmatter":{"title":"Horgok egy pillantásra","next":"hooks-state.html","prev":"hooks-intro.html"},"fields":{"path":"content/docs/hooks-overview.md","slug":"docs/hooks-overview.html"}}},"pageContext":{"slug":"docs/hooks-overview.html"}},"staticQueryHashes":[]}