A useState az alap React hook-ok közé tartozik. Ahogy a neve is sugallja, a state kezelésben van fontos szerepe. A React csomag része.
Használat
Mivel a React-nek a része, ezért a react csomag tartalmazza. Használathoz mindenképpen importálni kell:
import React, { useState } from "react";A state létrehozása így történik:
// általános formula
const [state, setState] = useState(valamiKezdoErtek);
// konkrét példa
<strong>const [textColor, setTextColor] = useState("blue");</strong>A konkrét példában létrehoztam egy textColor nevű state változót. A tömb második eleme, pedig ennek a változónak a beállító metódusa. Ugyanis state változó értékét közvetlenül nem lehet beállítani / módosítani. Tehát a következő nem fog működni:
textColor = "blue";Helyette egy tetszőlegesen elnevezett beállító függvényt / metódust kell megadni. Egyébként érdemes törekedni arra, hogy a state változó neve utaljon arra, hogy mire fogjuk a state-et használni. Ennek megfelelően az őt beállító függvénynek is célszerű beszédes nevet adni.
Tehát ennek a beállító függvénynek a segítségével lehet aztán a state értékét módosítani:
setTextColor("red");A setTextColor hívása kiváltja a komponens újra-renderelését.
Ami még fontos, hogy a useState() hívásakor megadhatunk egy kezdőértéket a state-nek. A példában ez a „blue” sztring volt.
Működő példa
Az online futtatható példában van két gomb és egy szöveg. A szöveg színe alapból kék, useState(„blue”). Az egyik gombbal a szöveg színét pirosra, a másikkal pedig zöldre lehet változtatni.
A működő példához itt egy Expo Snack link.