Kdykoli někdo na React narazí poprvé, je zaskočen jeho háčky a funkcemi, že? Sám se bojím některých háčků a kvůli některým jsem šel spát několikrát s pláčem.
Ale buďte si jisti, že alespoň useState I se vás mohu pokusit naučit jednoduchým způsobem, jako byste byli poprvé na základní škole.
V Reactu máme několik háčků a jedním z nich je useState, toto je pro mě nejjednodušší na pochopení a použití, tak se pojďme podívat, jak to funguje.
Vytvoření a spuštění useState
Co je useState? useState je háček React, který vrací pole se dvěma prvky, z nichž první je náš stav a druhý funkce pro změnu našeho stavu. Také můžeme projít jako argument, výchozí stav pro náš stav. Ještě nerozumíte? Uklidni se, vysvětlím ti to. Viz příklad níže:
import { useState } from "react";
export default function Component() {
const [state, setState] = useState(0);
Zde máme state
což je stav, setState
což je funkce pro změnu hodnoty našeho stavu a useState(0)
což je počáteční hodnota našeho stavu, v tomto případě je to 0
(může to být jakákoli jiná hodnota, například řetězec a logická ).
Použití useState v praxi
Abychom lépe pochopili, jak useState funguje, musíme mu porozumět i v praxi. A k tomu ukážu příklad useState k vytvoření jednoduchého čítače.
import { useState } from "react";
export default function Component() {
const [counter, setCounter] = useState(0);
function addCounter() {
setCounter(counter + 1);
}
return (
<div>
<h1>{counter}</h1>
<button onClick={addCounter}>Adicionar</button>
</div>
);
}
na řádku 4 máme příklad stavu, který přijímá počáteční hodnotu 0
const [counter, setCounter] = useState(0);
a funkce těsně pod na řádku 6, která připojí 1
do našeho stavu při každém kliknutí na tlačítko
function addCounter() {
setCounter(counter + 1);
}
pro zobrazení stavu na obrazovce stačí přidat {}
ve vašem HTML se stavem uvnitř, v příkladu je to h1 (řádek 12).
<h1>{counter}</h1>
Dvojitým kliknutím na tlačítko se náš stav automaticky zobrazí na stránce s číslem 2
, díky naší malé funkci zvané addCounter
kteří přidali 2krát.
DOKÁŽELI JSME TO, WOW! vytvořili jsme super jednoduchý a funkční malý pult s useState ! Teď už jen procvičovat s dalšími příklady a jsem si jistý, že vám to půjde skvěle! ❤️