useState je stavový řídicí hák pro komponenty React, ale co jsou háčky? Háky jsou funkce, které vám umožňují „zaháknout“ do stavu a životního cyklu Reactu z funkčních komponent. Háky nefungují uvnitř tříd, umožňují vám používat React bez tříd.
Řekněme, že useState byl vytvořen, aby oživil stavy komponenty a může být dynamicky aktualizován na stránce.
useState
Příklad níže:
const [count, setCount] = useState(0);
useState funguje jako Array destructuring, kde máme proměnné count a setCount, proměnná count je proměnná, která uchovává původní hodnotu a pokud chce uživatel tuto hodnotu aktualizovat, předá odpovědnost proměnné setCount, podle konvence proměnná, která aktualizuje hodnotu, obdrží na začátku slovo 'set', například:setText, setCount, setUser atd.
Obrázek pro ilustraci toho, co bylo dosud vysvětleno:
- Importujeme useState Hook z Reactu. Umožňuje nám udržovat místní stav ve funkční komponentě.
import React, { useState } from 'react';
- Uvnitř komponenty Example deklarujeme novou stavovou proměnnou voláním useState Hook. Vrací dvojici hodnot, kterou pojmenujeme. Voláme naši proměnnou počtu, protože zachovává počet kliknutí na tlačítko. Inicializujeme na nulu předáním 0 jako jediného argumentu pro useState. Druhá vrácená položka je samotná funkce. Umožňuje nám aktualizovat počet, takže jej pojmenujeme setCount.
const [count, setCount] = useState(0);
- Když uživatel klikne, zavoláme setCount s novou hodnotou. React poté znovu vykreslí komponentu Example a předá jí novou hodnotu počtu.
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
Děkujeme, že jste článek dočetli až sem, některé informace byly převzaty z oficiálního webu React
A vy, používáte už useState ve svých komponentách? Až příště!