A funkcionális komponensek használata a React

Kíváncsi volt, hogyan hozhat létre egy komponenst a React-ben?

Válaszolni olyan egyszerű, mint létrehozni egy olyan funkciót, amely egy HTML-szerű szintaxist ad vissza.

import React from 'react'; function Counter({n}) { return ( {n} ); } export default Counter;

Most nézzük meg, mi történt a fenti kódban.  Counteregy függvény, amely egy számot HTML-vé alakít át. És ha alaposabban megnézi, Countertiszta funkció. Így van, az a fajta függvény, amely a bemenetei alapján adja vissza az eredményt, és nincs mellékhatása.

Ez a magyarázat új kérdéssel jár. Mi a mellékhatás?

Röviden: mellékhatás a funkción kívüli környezet bármilyen módosulása, vagy a külső környezetből származó bármilyen információ, amely megváltozhat.

Lehet, hogy észrevette, hogy a paraméterek listájában a destrukturáló hozzárendelési szintaxist használtam a nbemeneti szám kibontásához . Ez azért van, mert az összetevők bemenetként egyetlen objektumot neveznek, amelyet „kellékeknek” neveznek, és amelyek rendelkeznek az összes tulajdonsággal, amelyet nekik küldtek.

Így nállítható be a paraméter bármely más komponensből:

Bizonyos értelemben ezt a szintaxist úgy lehet elképzelni, mint egy függvényhívást Counter({n: 1}). Nem igaz?

Folytassuk utunkat.

A funkcionális komponenseknek lehet állapota? Ahogy az összetevő neve javasolta, szeretnék számlálót tárolni és módosítani. Mi van, ha csak egy változót deklarálunk, amely számot tart az alkatrészen belül? Működni fog?

Találjuk ki.

Kezdem azzal, hogy deklarálom a változót a funkcionális komponensen belül.

import React from 'react'; function Counter() { let n = 0; return ( {n} ); } export default Counter;

Most adjuk hozzá azt a függvényt, amely növeli a számot, és naplózza a konzolon. A függvényt eseménykezelőként fogom használni a kattintási eseménynél.

import React from 'react'; function Counter() { let n = 0; function increment(){ n = n + 1; console.log(n) } return ( {n} Increment ); } export default Counter;

Ha megnézzük a konzolt, azt látjuk, hogy a szám valóban növekszik, de ez nem jelenik meg a képernyőn. Bármilyen ötletet?

Jól értette ... meg kell változtatnunk a számot, de újra meg kell adnunk a képernyőn is.

Itt jelenik meg a React Hooks segédfunkciója. Egyébként ezeket a segédfunkciókat horgoknak hívják, és a „use” szóval kezdődnek. Az egyiket, a useState-et fogjuk használni. A „re-render” szöveget a konzolba is naplózom, hogy megnézzem, hányszor Counterhívják meg a függvényt.

import React, { useState } from 'react'; function Counter() { const [n, setN] = useState(0); console.log('re-render'); function increment(){ setN(n + 1); console.log(n) } return ( {n} Increment ); } export default Counter;

Olvassuk el, mit useState()csinál.

Mi useStatetér vissza? Visszaad egy pár értéket: az aktuális állapotot és egy funkciót, amely frissíti.

Esetünkben naz aktuális állapot és setN()az a funkció, amely frissíti. Megnézte a konzolt, hogy hányszor jelenik meg az „újrarendelés” szöveg? Ezt meghagyom neked, hogy megtudd.

Az állapotot nem csak az új érték beállításával frissíthetjük, hanem olyan funkciót is biztosítunk, amely visszaadja az új értéket.

Esetünkben az új értéket adó függvény lesz meghívva increment(). Mint látja, increment()tiszta funkció.

import React, { useState } from 'react'; function increment(n){ return n + 1; } function Counter() { const [n, setN] = useState(0); return ( {n}  setN(increment)}> Increment ); } export default Counter;

Hogy megértsük, mi setN(increment)történik, olvassuk el a dokumentációt.

A frissítési funkció átadása lehetővé teszi az aktuális állapotérték elérését a frissítőben.

OK, így increment()az aktuális nállapottal hívják, és az új állapotérték kiszámítására szolgál.

Végső gondolatok

Foglaljuk össze, amit megtudtunk.

A React-ben egyszerűen meghatározhatunk egy komponenst egy olyan függvény használatával, amely egy HTML-szerű szintaxist ad vissza.

A React Hooks lehetővé teszi számunkra, hogy meghatározzuk az állapotot ilyen funkcionális komponensekre.

Végül, de nem utolsósorban, végül megszabadultunk az thisösszetevők álparamétereitől. Talán észrevette, hogy ez thisbosszantóvá válik a kontextus megváltoztatásával, amikor nem számít rá. Semmi gond erre. Nem fogjuk használni thisfunkcionális alkatrészekben.

Ha eddig elérted, megnézheted a könyveimet is.

Fedezze fel a funkcionális JavaScript- et nevezték el az egyika BookAuthority legjobb funkcionális programozási könyvei !

A funkcionális programozási technikák React alkalmazásával kapcsolatos további információkért tekintse meg a Functional React cikket.

Tanulja meg a funkcionális React projekt alapú módon, a React és Redux funkciós architektúrával .

Küldje el nekem visszajelzését.