Skip to content

Commit 3c2331b

Browse files
Improve hooks-intro translation
1 parent 455ae7a commit 3c2331b

File tree

1 file changed

+21
-21
lines changed

1 file changed

+21
-21
lines changed

content/docs/hooks-intro.md

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ permalink: docs/hooks-intro.html
55
next: hooks-overview.html
66
---
77

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.
99

1010
```js{4,5}
1111
import React, { useState } from 'react';
@@ -25,10 +25,10 @@ function Example() {
2525
}
2626
```
2727

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!
2929

3030

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.
3232

3333
>Megjegyzés
3434
>
@@ -37,71 +37,71 @@ Ez az új, `useState` nevű függvény az első "Horog" amiről tanulni fogounk,
3737
3838
## Videó bemutató {#video-introduction}
3939

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:
4141

4242
<br>
4343

4444
<iframe width="650" height="366" src="//www.youtube.com/embed/dpw9EHDh2bM" frameborder="0" allowfullscreen></iframe>
4545

4646
## Nincs "breaking change" {#no-breaking-changes}
4747

48-
Mielőtt folytatjuk, vedd figyelembe, hogy a Horgok:
48+
Mielőtt folytatjuk, tudd, hogy a Horgok:
4949

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.
5151
* **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.
5353

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.
5555

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.
5757

5858
**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.
5959

6060
## Motiváció {#motivation}
6161

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.
6363

6464
### Állapot teljes logika megosztása komponensek közt nehéz {#its-hard-to-reuse-stateful-logic-between-components}
6565

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.
6767

6868
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.
6969

7070
Ezt részletesebben kibeszéljük a [Készítsd el a saját Horgod](/docs/hooks-custom.html) fejezetben.
7171

7272
### A bonyolult komponensek egyre nehezebben érthetőek {#complex-components-become-hard-to-understand}
7373

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.
7575

7676
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.
7777

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).
7979

8080
Ezt részletesebben kibeszéljük a [A Hatás Horog](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) fejezetben.
8181

8282
### Az osztályok az embereket és gépeket is megzavarják {#classes-confuse-both-people-and-machines}
8383

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.
8585

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.
8787

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.
8989

9090
>Példák
9191
>
9292
>A [Horgok egy pillantásra](/docs/hooks-overview.html) egy jó hely elkezdeni a Horgok tanulását.
9393
9494
## Fokozatos adoptáló stratégia {#gradual-adoption-strategy}
9595

96-
>**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.**
9797
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.
9999

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.
101101

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.
103103

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.
105105

106106
## GY.I.K {#frequently-asked-questions}
107107

0 commit comments

Comments
 (0)