React Hookok

A React hookok a React 16.8 verziójában kerültek bevezetésre, és lehetővé teszik, hogy a funkcionális komponensek állapotkezelést és életciklus-műveleteket végezzenek. Két alapvető hook, a useState és useEffect, alapvető fontosságúak a modern React fejlesztésben.

useState

Mi az a useState?

A useState hook egy állapotváltozót és egy állapotfrissítő függvényt ad vissza. Használata egyszerű, és lehetővé teszi, hogy a funkcionális komponensek állapotot kezeljenek anélkül, hogy osztályokat kellene használni.

Szintaxis

const [state, setState] = useState(initialValue);

• state: az aktuális állapot értéke.
• setState: az állapot frissítésére szolgáló függvény.
• initialValue: az állapot kezdeti értéke.

1. példa

Ez a React példa egy egyszerű alkalmazást valósít meg, amely egy felhasználó által beírt számot vesz be, és egy gombnyomásra kiszámítja és megjeleníti annak négyzetét. Az állapotkezeléshez a useState hookot használja, míg az eredmény megjelenítésére egy React komponens elemet alkalmaz. Az alkalmazás tartalmaz egy bemeneti mezőt, egy gombot a számítás indításához, és egy linket, amely az eredményt mutatja.

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [szam, setSzam] = useState(0);
  const [eredmeny, setEredmeny] = useState("");

  const onBtnClick = () => {
    setEredmeny(`Az eredmény: ${szam * szam}`);
  };

  return (
    <div className="App">
      <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          {eredmeny}
        </a>

        <input
          type="number"
          placeholder="Add meg a számot"
          onChange={(e) => setSzam(Number(e.target.value))}
        />

        <button onClick={onBtnClick}>Számítás</button>
      </header>
    </div>
  );
}

export default App;

2. példa

Ez a React példa egy egyszerű összeadó alkalmazást valósít meg, ahol a felhasználó két számot adhat meg két külön bemeneti mezőben. A gomb megnyomásával az onBtnClick függvény összeadja a két számot, és az eredményt megjeleníti az alkalmazásban. Az állapotkezeléshez a useState hookot használja mindkét számhoz és az eredményhez.

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [elso, setElso] = useState(0);
  const [masodik, setMasodik] = useState(0);
  const [eredmeny, setEredmeny] = useState("");

  const onBtnClick = () => {
    setEredmeny(`Az eredmény: ${elso + masodik}`);
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {eredmeny}

        <input
          type="number"
          placeholder="Add meg az 1. számot"
          onChange={(e) => setElso(Number(e.target.value))}
        />

        {"+"}

        <input
          type="number"
          placeholder="Add meg az 2. számot"
          onChange={(e) => setMasodik(Number(e.target.value))}
        />

        <button onClick={onBtnClick}>Összead</button>
      </header>
    </div>
  );
}

export default App;

useRef

A useRef egy olyan hook React-ben, amelyet arra használunk, hogy közvetlen hozzáférést biztosítson egy komponens DOM eleméhez vagy tároljon egy változót úgy, hogy annak megváltozása ne okozzon újrarenderelést.

Mire jó a useRef?

1. DOM elemek elérése: A useRef segítségével közvetlenül hozzáférhetünk a DOM elemekhez. Például egy input mezőhöz hozzáadhatunk egy ref-et, hogy gyorsan elérhessük az értékét, módosíthassuk annak stílusát, vagy fókuszt állíthassunk be rajta.
2. Nem újrarenderelődő változók tárolása: A useRef megőrzi az értéket két renderelés között, és nem okoz új renderelést, ha az érték megváltozik. Ez akkor hasznos, ha egy változót nyomon kell követnünk a komponens élettartama alatt, de nem szeretnénk, hogy a változás befolyásolja a felhasználói felületet.

Hogyan működik a useRef?

Amikor létrehozunk egy ref-et a useRef segítségével, egy objektumot kapunk vissza, amelynek van egy current nevű tulajdonsága. Ezen keresztül érhetjük el és módosíthatjuk a ref értékét.

useEffect