You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/hooks-intro.md
+21-21Lines changed: 21 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ permalink: docs/hooks-intro.html
5
5
next: hooks-overview.html
6
6
---
7
7
8
-
A *horgok*egy új kiegészítése a Reactnek 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.
8
+
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.
9
9
10
10
```js{4,5}
11
11
import React, { useState } from 'react';
@@ -25,10 +25,10 @@ function Example() {
25
25
}
26
26
```
27
27
28
-
Ez az új, `useState` nevű függvény az első "Horog" amiről tanulni fogounk, de ez a példa csak egy kis kedvcsináló. Ne aggódj, ha még nem teljesen érted!
28
+
Ez az új, `useState` nevű függvény az első "Horog" amiről tanulni fogunk, de ez a példa csak egy kis kedvcsináló. Ne aggódj, ha még nem teljesen érted!
29
29
30
30
31
-
**A [következő oldalon](/docs/hooks-overview.html) elkezdheted a horgok tanulását.** Ezen az oldalon tovább magyarázzuk, hogy miért adjuk hozzá a Horgokat a Reacthez és hogyan segíthetnek téged nagyszerű alkalmazások írásában.
31
+
**A [következő oldalon](/docs/hooks-overview.html) elkezdheted a Horgok tanulását.** Ezen az oldalon tovább magyarázzuk, hogy miért adjuk hozzá a Horgokat a Reacthez és hogyan segíthetnek téged nagyszerű alkalmazások írásában.
32
32
33
33
>Megjegyzés
34
34
>
@@ -37,71 +37,71 @@ Ez az új, `useState` nevű függvény az első "Horog" amiről tanulni fogounk,
37
37
38
38
## Videó bemutató {#video-introduction}
39
39
40
-
A React Conf 2018-on Sophie Alpert és Dan Abramov mutatták be a Horgokat, akiket Ryan Florence követett, ahol a használatukat egy alkalmazás átírásával demonstrálta. Nézd meg a videót itt:
40
+
A React Conf 2018-on Sophie Alpert és Dan Abramov mutatták be a Horgokat, akiket Ryan Florence követett, ő a használatukat egy alkalmazás Horgokra való átírásával demonstrálta. A videót megnézheted itt:
Mielőtt folytatjuk, vedd figyelembe, hogy a Horgok:
48
+
Mielőtt folytatjuk, tudd, hogy a Horgok:
49
49
50
-
***Teljesen szabadon választhatóak.** A Horgokat kipróbálhatod néhány komponensben anélkül, hogy meglévő kódot kéne átírnod. De ha nem akarod, most egyből nem kell megtanulnod a Horgok használatát.
50
+
***Teljesen szabadon választhatóak.** A Horgokat kipróbálhatod néhány komponensben anélkül, hogy meglévő kódot kéne átírnod. De ha nem szeretnéd, nem kell most azonnal megtanulnod a Horgok használatát.
51
51
***100%-ban visszafelé kompatibilisak.** A Horgok egyetlen "breaking change"-t nem tartalmaznak.
52
-
***Már most elérhetőek.** A Horgok a v16.8.0 kiadással már most elérhetőek.
52
+
***Már most elérhetőek.** A Horgok a v16.8.0 kiadással már most használhatod.
53
53
54
-
**Az osztályok Reactből való eltávolítása nincs tervben.** Ennek az oldalnak a [lenti szekciójában](#gradual-adoption-strategy) többet olvashatsz a Horgok fokozatos adoptáló stratégiájáról.
54
+
**Az osztályok Reactből való eltávolítása nincs tervben.** Ennek az oldalnak [egy lentebbi szekciójában](#gradual-adoption-strategy) többet olvashatsz a Horgokat fokozatosan adoptáló stratégiájáról.
55
55
56
-
**Nem helyezik új lábakra a Reactről tanult koncepciókat.** A horgok inkább egy közvetlenebb API-t biztosítanak a React koncepcióihoz, amiket már ismersz: prop-ok, állapot, kontextus, ref-ek és életciklus. Ahogy később meg fogjuk mutatni, a Horgok egy új, erőteljes módját is lehetővé teszik ezek kombinálására.
56
+
**Nem helyezik új alapokra a Reactről tanult koncepciókat.** A Horgok ehelyett egy közvetlenebb API-t nyújtanak számodra a React koncepcióihoz, amiket már ismersz: prop-ok, állapot, kontextus, ref-ek és életciklus. Ahogy később meg is fogjuk mutatni, a Horgok egy új, erőteljes módját is lehetővé teszik ezek kombinálására.
57
57
58
58
**Ha csak el szeretnéd kezdeni a Horgok tanulását, nyugodtan [ugorj a következő oldalra!](/docs/hooks-overview.html)** Vagy folytathatod ennek az oldalnak az olvasását, hogy többet megtudj arról, hogy miért adjuk hozzá a Horgokat a Reacthez és hogyan kezdhetjük el használni őket anélkül, hogy át kéne írnunk az alkalmazásainkat.
59
59
60
60
## Motiváció {#motivation}
61
61
62
-
A Horgok a React többféle, látszólag nem összefüggő problémáit oldják meg, amiket öt év alatt több tízezer komponens írása és karbantartása alatt fedeztünk fel. Ha csak tanulod a Reactet, napi szinten használod, vagy egy másik könyvtárat preferálsz hasonló komponensmodellel, valószínű felismersz néhányat ezen problémák közül.
62
+
A Horgok a React többféle, látszólag nem összefüggő problémáit oldják meg, amiket öt év alatt több tízezer komponens írása és karbantartása alatt fedeztünk fel. Ha csak tanulod a Reactet, napi szinten használod, vagy egy másik könyvtárat preferálsz hasonló komponensmodellel, valószínű te is felismersz néhányat ezen problémák közül.
63
63
64
64
### Állapot teljes logika megosztása komponensek közt nehéz {#its-hard-to-reuse-stateful-logic-between-components}
65
65
66
-
A React nem ajánl megoldást újrafelhasználható viselkedés egy komponenshez "csatolásához" (például egy adatbázishoz kapcsolást). Ha már dolgoztál egy ideje a Reacttel, ismerős lehet a [render prop-ok](/docs/render-props.html) és a [felsőbb rendű komponensek](/docs/higher-order-components.html) mintája, amik ezt próbálják megoldani. De ezek használata a komponenseid átrendezését igénylik, ami nehézkes lehet és a kód nehezebben követhető lesz. Ha ránézek egy tipikus React alkalmazásra a React Fejlesztői Eszközből, valószínűleg találkozni fogsz egy "csomagoló pokollal", ahol komponensek több rétegnyi ellátó és fogyasztóval, felsőbb rendű komponensekke, render propokkal és más absztrakciókkal vannak körbevéve. Ki tudnánk [őket szűrni a Fejlesztői Eszközben](https://github.com/facebook/react-devtools/pull/503), de ez egy mélyebb problémára mutat rá: A Reactnek szüksége van egy jobb primitívre állapot teljes logika megosztására
66
+
A React nem ajánl megoldást újrafelhasználható viselkedés egy komponenshez "csatolásához" (például egy adatbázishoz kapcsolás). Ha már egy ideje Reacttel dolgozol, ismerős lehet a [render prop-ok](/docs/render-props.html) és a [felsőbb rendű komponensek](/docs/higher-order-components.html) mintája, amik ezt próbálják megoldani. De ezek használata a komponenseid átrendezését igénylik, ami nehézkes lehet és a kód nehezebben követhető lesz. Ha ránézel egy tipikus React alkalmazásra a React Fejlesztői Eszközből, valószínűleg találkozni fogsz a "csomagoló pokollal", ahol komponensek több rétegnyi ellátó (provider) és fogyasztóval (consumer), felsőbb rendű komponensekkel, render prop-okkal és más absztrakciókkal vannak körbevéve. Ki tudnánk [őket szűrni a Fejlesztői Eszközben](https://github.com/facebook/react-devtools/pull/503), de ez egy mélyebb problémára mutat rá: A Reactnek szüksége van egy jobb primitívre állapot teljes logika megosztására.
67
67
68
68
A Horgok segítségével kivonhatod az állapot teljes logikát egy komponensből, hogy azt külön tudd tesztelni és újra fel tudd használni. **A Horgok lehetővé teszik állapot teljes logika újrafelhasználását a komponens hierarchiád megváltoztatása nélkül.** Ez lehetővé teszi a Horgok megosztását komponensek között, vagy a közösséggel.
69
69
70
70
Ezt részletesebben kibeszéljük a [Készítsd el a saját Horgod](/docs/hooks-custom.html) fejezetben.
71
71
72
72
### A bonyolult komponensek egyre nehezebben érthetőek {#complex-components-become-hard-to-understand}
73
73
74
-
Gyakran kellett komponenseket kezelnünk, amik egyszerűnek indultak, de egy nagy, állapot teljes, mellékhatásokkal teli, kezelhetetlen zűrzavarrá váltak. Minden egyes életciklus metódus gyakran tartalmaz oda nem illő logikát. Például egy komponens végrehajthat adatlehívást a `componentDidMount`-ban és a `componentDidUpdate`-ban. Azonban ugyanaz a `componentDidMount` metódus tartalmazhat más oda nem illő logikát ami eseményhallgatókat állít fel, ezek tisztítása pedig a `componentWillUnmount`-ban van végrehatjva. Egymástól függő kód ami együtt változik el lesz választva, de teljesen össze nem illő kódrészletek ugyanabban a metódusban végzik. Ez könnyen hibákhoz és ellentmondásokhoz vezethet.
74
+
Gyakran kellett komponenseket kezelnünk, amik egyszerűnek indultak, de egy nagy, állapot teljes, mellékhatásokkal teli, kezelhetetlen zűrzavarrá váltak. Minden egyes életciklus metódus gyakran tartalmaz oda nem illő logikát. Például egy komponens végrehajthat adatlehívást a `componentDidMount`-ban és a `componentDidUpdate`-ben. De ugyanez a `componentDidMount` metódus tartalmazhat más, oda nem illő logikát ami eseményhallgatókat állít fel, ezek eltávolítása pedig a `componentWillUnmount`-ban történik. Együtt változó, egymástól függő kód elválasztódik egymástól, miközben teljesen össze nem illő kódrészletek ugyanabban a metódusban végzik. Ez könnyen hibákhoz és ellentmondásokhoz vezethet.
75
75
76
76
A legtöbb esetben ezeket a komponenseket nem lehet kisebb egységekre feldarabolni, mert az állapot teljes logika szanaszét van. Valamint tesztelni is nehéz őket. Ez az egyik oka, hogy sokan szeretik a Reactet különálló állapot kezelő könyvtárakkal kombinálni. Azonban ez gyakran túl sok absztrakcióval jár, fájlok közötti ugrálást igényel és nehezebbé teszik a komponenseid újrafelhasználását.
77
77
78
-
Ezen problémák megoldására **a Horgok lehetővé teszik számodra egy komponens feldarabolását kisebb függvényekké az összefüggőségüket alapul véve (például egy feliratkozás felállítása, vagy adatlehívás)** ahelyett, hogy a feldarabolást életciklusok diktálják. Opcionálisan, a helyi állapot kiszámíthatóbbá tételéhez választhatsz egy redukátort (reducer).
78
+
Ezen problémák megoldására,**a Horgokkal egy komponenst fel tudsz darabolni kisebb függvényekké, a darabok összefüggőségét alapul véve (például egy feliratkozás felállítása, vagy adatlehívás)** ahelyett, hogy a feldarabolást életciklusok diktálnák. Opcionálisan, a helyi állapot kiszámíthatóbbá tételéhez választhatsz egy redukátort (reducer).
79
79
80
80
Ezt részletesebben kibeszéljük a [A Hatás Horog](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) fejezetben.
81
81
82
82
### Az osztályok az embereket és gépeket is megzavarják {#classes-confuse-both-people-and-machines}
83
83
84
-
Azon kívül hogy a kód újrafelhasználását és rendezését nehezebbé teszik, azt is észrevettük, hogy az osztályok a React tanulásának akadályt is képezhetnek. Értened kell a `this` működését JavaScriptben, ami nagyon különböző a legtöbb nyelv működéséhez képest. Emélkezned kell az esemény hallgatók megkötésére (bind). Instabil [szintaxis javslatok nélkül](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/) a kód nagyon bőbeszédűvé válik. Az emberek tökéletesen megértik a propokat, az állapotot, at fentről-lefelé adatfolyamot, de még mindig küzdenek az osztályokkal. A függvény és osztály közötti megkülönböztetés a Reactben és hogy mikor melyiket kell használni nézeteltérésekhez vezet még gyakorlott React fejlesztők között is.
84
+
Azon kívül, hogy a kód újrafelhasználását és rendezését nehezebbé teszik, azt is észrevettük, hogy az osztályok a React tanulásának is akadályt képezhetnek. Értened kell a `this` működését JavaScriptben, ami nagyon különböző a legtöbb nyelv működéséhez képest. Emélkezned kell az esemény hallgatók megkötésére (bind). Instabil [szintaxis javslatok nélkül](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/) a kód nagyon bőbeszédűvé válik. Az emberek tökéletesen megértik a prop-okat, az állapotot, at fentről-lefelé irányuló adatfolyamot, de még mindig küzdenek az osztályokkal. A függvény és osztály közötti megkülönböztetés a Reactben, és hogy mikor melyiket kell használni, még gyakorlott React fejlesztők között is nézeteltérésekhez vezet.
85
85
86
-
Valamint a React nagyjából már öt éve kint van és azt szeretnék, ha a következő öt évben is az maradna. Ahogy a [Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) és mások is mutatják, a komponensek [idő előtti kompilációjának](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) nagy jövője van. Főleg ha az nem korlátozott sablonokra. A közelmúltban kisérlezetni kezdtünk a [komponens hajtogatással](https://github.com/facebook/react/issues/7323) a [Prepack](https://prepack.io/) használatával, és az eredmény jónak ígérkezik. Azonban úgy találtuk, hogy az osztálykomponensek akaratlan mintákra bátorítanak amik ezek optimalizálását nehézkessé teszik. Az osztályokkal problémák lépnek fel a ma eszközeiben is. Például az osztályokat nehéz jól kisebbíteni és az azonnali újratöltést (hot reloading) is nehézzé és megbízhatatlanná teszik. Egy olyan API-t szeretnénk bemutatni, ami a kódot nagyobb eséllyel tartja a jobban optimalizálható pályán.
86
+
Továbbá, a React nagyjából már öt éve kint van, és azt szeretnék, ha a következő öt évben is releváns maradna. Ahogy a [Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) és mások is mutatják, a komponensek [idő előtti kompilációjának](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) nagy jövője van. Főleg ha az nem korlátozott sablonokra. A közelmúltban kísérletezni kezdtünk a [komponens hajtogatással](https://github.com/facebook/react/issues/7323) a [Prepack](https://prepack.io/) használatával, és az eredmény jónak ígérkezik. Azonban úgy találtuk, hogy az osztálykomponensek akaratlan mintákra bátorítanak, amik ezek optimalizálását nehézkessé teszik. Az osztályokkal problémák lépnek fel a ma eszközeiben is. Például az osztályokat nehéz jól kisebbíteni és az azonnali újratöltést (hot reloading) is döcögőssé és megbízhatatlanná teszik. Egy olyan API-t szeretnénk bemutatni, ami a kódot nagyobb eséllyel tartja a jobban optimalizálható pályán.
87
87
88
-
Ezen problémák megoldására a **Horgok a React funkcióinak használatát teszik lehetővé osztályok nélkül.** Elméletben a React komponensek mindig közelebb álltak a függvényekhez. A Horgok felkarolják a függvényeket, de anélkül, hogy feláldoznák a React gyakorlati szellemét. A Horgok egy imperatív menekülőutat szolgáltatnak, és nem igényelnek bonyolult funkcionális vagy reaktív programozási technikákat.
88
+
Ezen problémák megoldására, a **Horgok a React funkcióinak használatát teszik lehetővé osztályok nélkül.** Elméletben a React komponensek mindig közelebb álltak a függvényekhez. A Horgok felkarolják a függvényeket, de anélkül, hogy feláldoznák a React gyakorlati szellemét. A Horgok egy imperatív menekülőutat szolgáltatnak, és nem igényelnek bonyolult funkcionális vagy reaktív programozási technikákat.
89
89
90
90
>Példák
91
91
>
92
92
>A [Horgok egy pillantásra](/docs/hooks-overview.html) egy jó hely elkezdeni a Horgok tanulását.
>**Röviden: Az osztályok eltávolítása Reactből nincs tervben.**
96
+
>**Röviden: Nincs tervben az osztályok eltávolítása Reactből.**
97
97
98
-
Tisztában vagyunk vele, hogy a React fejlesztők termékek leszállítására fókuszálnak és nincs idejük minden új kiadott API változást megnézni. A Horgok még nagyon újak, lehet, hogy megéri várni amíg több példa és tutoriál jelenik meg, mielőtt el kezdenéd tanulni, vagy adoptálni őket.
98
+
Tisztában vagyunk vele, hogy a React fejlesztők termékek leszállítására fókuszálnak és nincs idejük minden új kiadott API változást megnézni. A Horgok még nagyon újak, ezért lehet hogy megéri várni, amíg több példa és tutoriál jelenik meg, mielőtt el kezdenéd tanulni, vagy adoptálni őket.
99
99
100
-
Azt is megértjük, hogy a léc nagyon magas egy új React primitív hozzáadásakor. Az érdeklődő olvasóknak készítettünk egy [részletes RFC-t](https://github.com/reactjs/rfcs/pull/68), ami részletesebben elmerül a motivációban és egy extra perspektívát ad a specifikus tervezési döntésekről és az Horgok ihletőiről.
100
+
Azt is megértjük, hogy a léc nagyon magas egy új React primitív hozzáadásakor. Az érdeklődő olvasóknak készítettünk egy [részletes RFC-t](https://github.com/reactjs/rfcs/pull/68), ami mélyebbre menően foglalkozik a motivációval és egy extra perspektívát ad a specifikus tervezési döntésekről és az Horgok ihletőiről.
101
101
102
-
**Alapvető, hogy a Horgok együtt tudnak működni a meglévő kódoddal, hogy fokozatosan tudd őket adoptálni.** Senki nem sürget a Horgokra migrálással. Ajánljuk a "nagy átírások" elkerülését, főleg meglévő, bonyolult osztálykomponensek esetében. Hogy "Horgokban kezdj el gondolkodni", egy új gondolkodásmódot igényel. Tapasztalatunk szerint a legjobb gyakorlat a Horgok használatára új, és nem kritikus komponensek, de győződj meg róla, hogy a csapatodban mindenki komfortosan érzi magát velük. A Horgok kipróbálása után nyugodtan [küldj nekünk visszajelzést](https://github.com/facebook/react/issues/new), legyen az pozitív, vagy negatív.
102
+
**Alapvető, hogy a Horgok együtt tudnak működni a meglévő kódoddal, hogy fokozatosan tudd őket adoptálni.** Senki nem sürget a Horgokra migrálással. Ajánljuk a "nagy átírások" elkerülését, főleg meglévő, bonyolult osztálykomponensek esetében. Hogy "Horgokban kezdj el látni", egy új gondolkodásmódot igényel. Tapasztalataink szerint a legjobb mód a Horgok használatára új, és nem kritikus komponensek, de győződj meg róla, hogy a csapatodban mindenki komfortosan érzi magát velük. A Horgok kipróbálása után nyugodtan [küldj nekünk visszajelzést](https://github.com/facebook/react/issues/new), legyen az pozitív, vagy negatív.
103
103
104
-
A Horgokkal azt szeretnénk elérni, hogy az osztályok minden jelenleg elérhető használati módját lefedjék, de **az előrelátható jövőben folytatni fogjuk az osztályok támogatását is.** A Facebooknál több tízezer kopmponenst írtunk osztályokban és egyáltalán nincs terveb ezek átírása. Ehelyett a Horgokat csak új kódban használjuk közvetlenül osztályok mellett.
104
+
A Horgokkal azt szeretnénk elérni, hogy az osztályok minden jelenleg elérhető használati módját lefedjék, de **az előrelátható jövőben folytatni fogjuk az osztályok támogatását is.** A Facebooknál több tízezer kopmponenst írtunk osztályokban, és egyáltalán nincs tervben ezek átírása. Ehelyett a Horgokat csak új kódban használjuk közvetlenül osztályok mellett.
0 commit comments