Előzmények: a komponenseken már túl vagyunk, úgyhogy innen tudjuk folytatni az ismerkedést a hook-okkal.

Ebben a bejegyzésben megfogunk ismerkedni pár egyszerűbb hook felépítésével egy-két egyszerűbb példán keresztül, későbbiekben pedig majd jobban bele is megyünk a témába...

Mire jó a hook?

Segítségével a React állapotait tudjuk módosítani egyszerűen, illetve élettartami funkciókat tudunk kezelni külön osztályok megírása nélkül.

useState hook

A useState() hook-ot használva az állapotot tudjuk beállítani és lekérdezni. Változásnál újra létrehozza a weboldal kinézetét, a már frissült adattal/adatokkal. Használata igen egyszerű: először be kell importálni a useState komponenst a react-ból, majd létre is tudjuk hozni a saját állapotunkat. A létrehozása így néz ki:

const [count, setCount] = useState(0);  

Ennek a formája kötött, a getter-setter elvet követi. A getterrel (count) az értéket lehet lekérdezni, a setterrel (setCount) pedig ezt beállítani. Az egyenlőség jel után a useState() zárójeleiben (kvázi paraméterként) kell megadni a kezdeti értéket.

Egy egyszerű példa

Legyen egy gombunk és egy div-ünk, ahol kiíratjuk hányszor nyomtunk rá a gombra, ez az érték természetesen minden gombnyomásra növekszik.

Elsőnek nyissuk meg a komponenseket tárgyaló projektünket (komponensek), amiben a kártyákat csináltuk. A "kártyás részt" majd ki is vehetjük belőle és koncentráljunk az új dolgainkra:

App.js-t módosítsuk az alábbi módon:

import React, { useState } from 'react';  //importáljuk a useState-et a react-ból

function App() {
  const [count, setCount] = useState(0); //a state-eket mindig a return felett kell felvenni, a fenti módon. 
  return (
    <div>  
      <p>Már {count} alkalommal kattintottál</p>  
      <button onClick={() => setCount(count + 1)}>
        Nyomj meg  
      </button>  
    </div>  
  );
}

export default App;

A button onClick attribútumában (eseménykezelőjében) határozom meg, hogy gombnyomásra növekedjen a count értéke eggyel.

Indítsuk el a weboldalunk kiszolgálását így:

npm start

Ekkor ezt kell látnunk a böngészőnkben (ha már megnyomtuk például 8 alkalommal a gombot): 

useEffect hook

Ezzel a hook-kal úgymond mellékhatásokat tudunk kiváltani, ha frissül az oldal. Például ha változik a fentebb megírt state, akkor azzal együtt lecseréljük a weboldal címét is. Az előző példát felhasználva csináljuk is meg.

Először bővítsük ki az import-jainkat, és hívjuk meg a useEffect-et a fentebb megírt módon, majd bővítsük az előző kódunkat az alábbi módon:

import React, { useState, useEffect } from 'react';  //importáljuk a useState-et a react-ból

function App() {
  const [count, setCount] = useState(0); //a state-eket mindig a return felett kell felvenni, a fenti módon. 
  useEffect(() => {
    document.title = `${count} alkalommal kattintottál`;
  })
  return (
    <div>  
      <p>Már {count} alkalommal kattintottál</p>  
      <button onClick={() => setCount(count + 1)}>
        Nyomj meg  
      </button>  
    </div>  
  );
}

export default App;
 
 
 
 

Ha jól csináltuk ezt kell látnunk (6 kattintás után):

Így látható tehát, hogy ezek segítségével képesek voltunk manipulálni a webalkalmazás "body"-n belüli és utána a "head" részét is.