useState - jeden z hlavních háčků poskytovaných Společností React. S jeho pomocí lze stav přidat do funkčních komponent. V tomto článku se podíváme, jak používat useState a jak pomáhá zvládat proměnné a stavy.
K použití useState, je třeba jej importovat z knihovny React. Je také třeba vytvořit proměnnou, která uchová aktuální hodnotu stavu, a funkci, která vám umožní tuto hodnotu změnit. Počáteční hodnota stavu je přenášena jako argument funkce useState.
Když je funkční komponenta vykreslena, vyvolá useState a vrátí pole se současnou hodnotou stavu a funkcí pro jeho aktualizaci. Dále je možné použít získané hodnoty v komponentě. Při volání funkce pro aktualizaci stavu dochází k překreslení součásti s aktuálními hodnotami.
useState velmi užitečné pro správu formulářů, časovačů a dalších případů, kde je třeba sledovat změnu hodnot, když aplikace běží. Používat useState, lze zjednodušit a zlepšit proces vývoje funkčních komponent.
Co je useState a jak funguje
Chcete-li použít Hook useState, musíte jej importovat z knihovny React:
import React, from 'react';
Po importu lze stav vyhlásit pomocí funkce useState:
const [state, setState] = useState(initialValue);
useState přijme počáteční hodnotu stavu initialValue a vrátí pole obsahující aktuální hodnotu stavu a funkci, kterou lze použít k jeho aktualizaci. Pole se pak rozebírá destrukturizací na proměnné state a setState.
Chcete-li získat aktuální hodnotu stavu, můžete použít proměnnou state. Chcete-li aktualizovat stav, musíte zavolat funkci setState a předat jí novou hodnotu. React poté komponentu znovu vykreslí a zobrazí novou hodnotu stavu.
Tento proces se nazývá " stav s hooky "a na rozdíl od" stav s třídami " poskytuje jednodušší a přehlednější způsob práce se stavem ve funkčních komponentách.
Je důležité si uvědomit, že hukot useState zpřesňuje místní stav součásti a je vázán na její instanci. Každá součást, která používá usestate Hook, bude mít svůj vlastní stav bez ohledu na jiné instance této komponenty.
Základní principy používání useState
1. Importovat useState
Chcete-li použít useState, musíte jej importovat z React:
import React, < useState >from 'react';2. Inicializace stavu
useState nám umožňuje inicializovat stav. Počáteční hodnotu stavu předáváme jako argument při volání useState. Například:
const [count, setCount] = useState(0);Zde inicializujeme stav count s hodnotou 0 a vytvoříme funkci setCount pro jeho aktualizaci.
3. Použití stavu v komponentě
Po inicializaci stavu jej můžeme použít v naší komponentě. Můžeme například zobrazit hodnotu stavu count:
Count:
4. Aktualizace stavu
Stav můžeme aktualizovat pomocí funkce setCount, kterou jsme vytvořili při inicializaci:
const increment = () => ; V tomto příkladu zvyšujeme hodnotu stavu count o 1 při každém volání funkce increment.
5. Použití funkční aktualizace stavu
useState také podporuje funkční aktualizaci stavu. Místo přenosu nové hodnoty do funkce setCount můžeme předat funkci, která přijme předchozí stavovou hodnotu a vrátí novou hodnotu. Například:
const increment = () => prevCount + 1);>; V tomto případě používáme funkci prevCount => prevCount + 1 ke zvýšení hodnoty stavu count o 1.
To jsou základní principy používání useState. Poskytuje snadný a pohodlný způsob, jak přidat a aktualizovat stav ve funkčních součástech React.
Jak vyhlásit stav pomocí useState
V React, stav představuje způsob ukládání a změny dat součásti během jejího životního cyklu. Stav lze vyhlásit pomocí háku useState dostupného v React od verze 16.8.
Chcete-li vyhlásit nový stav pomocí useState, musíte tento hák vyvolat a jako argument mu předat počáteční hodnotu stavu. Chcete-li například vyhlásit stav proměnné count a nastavit její počáteční hodnotu na 0, můžete použít následující kód:
const [count, setCount] = useState(0);V tomto příkladu, useState vrací pole dvou prvků: proměnnou count, která obsahuje aktuální stavovou hodnotu, a funkci setCount, která umožňuje změnit stavovou hodnotu. Funkce setCount přijímá argument, který se stává novou hodnotou stavu.
Pro přístup k hodnotě stavu lze použít proměnnou count. Jeho hodnotu lze například zobrazit na stránce takto:
Счетчик:
Když je funkce setCount vyvolána s novou hodnotou, React přeřadí komponentu a aktualizuje ji s novou hodnotou stavu. Komponenta bude vždy zobrazovat aktuální hodnotu stavu.
Hák useState lze použít několikrát uvnitř jedné složky k vyhlášení několika různých stavů. Každý stav by měl být vyhlášen v samostatné výzvě.
Použití háku useState je snadný a efektivní způsob, jak řídit stav součásti v React. S ním lze vytvářet interaktivní komponenty, které mohou změnit svou vnitřní logiku a zobrazení na základě aktuální hodnoty stavu.
Jak získat aktuální hodnotu stavu
Chcete-li získat aktuální hodnotu stavu, musíte se obrátit na první prvek pole, který vrací hák useState . Například pokud kód používal následující hák:
const [count, setCount] = useState(0);Aktuální hodnota stavu bude rovna proměnné count . Chcete-li získat tuto hodnotu, stačí vyvolat proměnnou count na správném místě kódu. Například:
K zobrazení na stránce lze také použít aktuální hodnotu stavu. Můžete například vytvořit prvek
nebo a nastavit jeho textový obsah na stejnou aktuální hodnotu stavu pomocí proměnné count . Například:
Текущее значение состояния:
Aktuální hodnotu stavu lze tedy získat odkazem na proměnnou, která tuto hodnotu obsahuje. To umožňuje použít stavovou hodnotu pro různé operace a zobrazení v komponentě.
Jak změnit stav pomocí useState
Pro použití useState musíte jej importovat z knihovny React:
import React, < useState >from 'react';Poté můžeme vyhlásit stav a jeho hodnotu uvnitř funkční součásti:
const [count, setCount] = useState(0);V tomto příkladu oznamujeme stav count a nastavíme jeho hodnotu na 0 při inicializaci součásti.
Tento stav pak můžeme použít uvnitř součásti, například k zobrazení aktuální hodnoty měřiče:
Count:
Ke změně stavu používáme funkci vrácenou useState - setCount. Volání této funkce vám umožňuje aktualizovat stavovou hodnotu:
const increment = () => prevCount + 1);> V tomto příkladu zvyšujeme hodnotu čítače o jednotku při každém volání funkce increment.
Je důležité pamatovat změna stavu pomocí useState asynchronně. To znamená, že po sobě jdoucí volání funkce změny stavu lze sloučit do jedné baterie a provést po dokončení aktuálního renderu součásti.
Takže použití useState umožňuje nám snadno spravovat stav ve funkčních součástech React a jeho včasná aktualizace zajišťuje správné zobrazení změn uživateli.
Jak převést počáteční hodnotu v useState
Když použijeme hák useState, můžeme do něj přenést počáteční hodnotu. Počáteční hodnota určuje, jaká hodnota bude přiřazena proměnné při prvním renderu součásti.
Existují dva způsoby, jak přenést počáteční hodnotu do useState:
- Předat hodnotu jako argument funkce useState. Například:
const [count, setCount] = useState(0);V uvedeném příkladu předáváme 0 jako počáteční hodnotu pro proměnnou count. Nyní bude count mít hodnotu 0 při prvním renderu součásti.
- Použít Inicializační funkci uvnitř useState. Například:
const [count, setCount] = useState(() => );V tomto případě předáme funkci, která vrátí počáteční hodnotu (v tomto případě 0) do useState. Tento způsob je užitečný, když počáteční hodnota závisí na jiných proměnných nebo je nutné provést komplexní logiku, aby byla definována.
V obou případech useState vrátí pár hodnot: aktuální hodnota proměnné a funkce pro její aktualizaci (setCount v našich příkladech). Tuto funkci používáme ke změně hodnoty proměnné v budoucnu.
Přenos počáteční hodnoty v useState nám tedy umožňuje nastavit hodnotu proměnné při prvním renderu součásti a mít plnou kontrolu nad její aktualizací v budoucnu.
Jak používat useState pro práci s formuláři
Pro začátek musíme dovážet Hook useState z knihovny React:
import React, < useState >from "react";Pak můžeme použít Hook useState uvnitř naší složky funkce. Pro práci s formami budeme muset nastavit počáteční hodnotu pro stav a vytvořit obslužnou rutinu pro změnu hodnoty.
Podívejme se na příklad jednoduchého tvaru v komponentě funkce:
function Form() return ();>Ve výše uvedeném příkladu jsme vytvořili stav name a funkci setName s pomocí Hucka useState. Výchozí hodnota pro name nastaveno na prázdný řádek.
Všimněte si, že přiřazujeme hodnotu vstupního pole ke stavu name pomocí atributu value a předáme zpracovateli změnu hodnoty handleChange přes atribut onChange.
Při každé změně hodnoty v vstupním poli je volán obslužný program handleChange, který aktualizuje stav name s novým významem. Změna stavu vede k opětovnému vykreslení součásti a zobrazení nové hodnoty do vstupního pole.
Takže používáme Hook useState Chcete-li vytvořit a aktualizovat stav v komponentách funkcí. Umožňuje nám snadno pracovat s formuláři, aktualizovat hodnoty vstupních polí a sledovat jejich změny.
Jak používat useState pro práci s poli
Použití useState práce s poli vyžaduje několik funkcí. Počáteční hodnota stavu musí být pole, jinak jej budeme muset převést na pole.
Vytvoření stavu pole pomocí useState je třeba použít následující syntaxi:
const [array, setArray] = useState([]);
V tomto příkladu je array samotné pole a setArray je funkce, kterou použijeme k aktualizaci stavu pole.
Při aktualizaci stavu pole pomocí setArray je třeba vzít v úvahu, že React nebude automaticky kombinovat změny v poli. Místo toho je nutné použít funkci zpětného volání k explicitnímu určení, jak změnit stav pole.
K přidání položky do pole lze například použít následující kód:
setArray(prevArray => [. prevArray, newElement]);
V tomto příkladu je prevArray předchozí stav pole a newElement je nový prvek, který chceme přidat. Pomocí operátora rozšíření pole [. prevArray, newElement] vytváříme novou kopii pole, do kterého přidáváme nový prvek.
Podobně lze k odstranění položky z pole použít následující kód:
setArray(prevArray => prevArray.filter(item => item !== elementToRemove));
Zde je elementToRemove prvek, který chceme odstranit z pole. Pomocí metody filter vytváříme nové pole obsahující pouze prvky, pro které je funkce predikátem item => item != = elementToRemove vrací true .
Také s pomocí useState je možné aktualizovat složitější struktury uvnitř pole, jako jsou objekty nebo vnořená pole. K tomu lze použít stejné metody: [. prevArray, newElement] Chcete-li přidat prvek, prevArray.filter(item => item != = elementToRemove) pro odstranění prvku.
Nyní víte, jak používat useState pro práci s poli. Pamatujte, že při aktualizaci pole musíte použít funkci zpětného volání a jasně specifikovat všechny změny stavu.
Jak používat usestate s objekty
Hák useState v React nám umožňuje vytvářet stav ve funkčních komponentách. Ukládání a aktualizace stavu objektů však může být o něco složitější než jednoduché hodnoty. V tomto případě budeme muset použít useState v kombinaci s funkcí aktualizace stavu.
Pro práci s objekty v useState můžeme použít destrukturizaci. Pokud například máme objekt user s poli name a age, můžeme vytvořit jeho stav následovně:
const [user, setUser] = useState(< name: '', age: 0 >);V tomto příkladu je uživatel stavovým objektem a setUser je funkcí aktualizace stavu. V tomto případě lze původní stav objektu nastavit také pomocí vlastnosti defaultValue:
const [user, setUser] = useState(< name: '', age: 0 >, defaultValue);K aktualizaci stavu objektu můžeme použít funkci setUser a předat ji novému stavu jako objekt, který bude kombinován se současným stavem. Chcete-li například změnit uživatelské jméno, můžeme napsat:
setUser(< . user, name: 'John' >);V tomto příkladu vytvoříme nový objekt kopírováním všech polí ze současného stavu (user) a změnou pouze pole name. To umožňuje zachovat zbývající pole nezměněná.
Další důležitou věcí, kterou je třeba mít na paměti při práci s objekty v useState, je, že funkce aktualizace stavu nespojuje objekty, ale zcela je nahrazuje. Aby bylo možné zachovat všechna pole objektu kromě změněného, je nutné použít destrukturizaci. Například změnit pouze pole age:
setUser(< . user, age: user.age + 1 >);V tomto příkladu vytvoříme nový objekt kopírováním všech polí ze současného stavu (user) a zvýšením hodnoty pole age o 1.
Použití usestate s objekty nám umožňuje pohodlně ukládat a aktualizovat stav složitých objektů ve funkčních komponentách v React.
Výhody a nevýhody používání useState
Výhody:
1. Snadné použití: funkce useState poskytuje jednoduché rozhraní pro správu stavu součásti. Počáteční hodnota a funkce pro aktualizaci stavu jsou předány jako argumenty a nový stav se vrátí v důsledku hovoru.
2. Pohodlné sledování změn: useState automaticky sleduje změny stavu součásti a reaguje na ně aktualizací příslušných částí vizuálního zobrazení.
3. Flexibilní řízení stavu: funkce useState umožňuje mít v komponentě více stavů, což usnadňuje organizaci a kontrolu složité logiky.
4. Použití háčků: funkce useState je jedním z hlavních háčků React, které vám umožňují implementovat komplexní logiku bez použití třídních komponent. To vám umožní zvýšit čitelnost a použitelnost kódu.
Nedostatky:
1. Použití useState může vést k vytvoření velkého počtu stavů v komponentě, což může ztížit pochopení kódu a jeho podporu.
2. Nesprávné použití useState může vést k problémům s výkonem, zejména při aktualizaci velkého počtu stavů nebo při použití složité logiky.
3. useState neposkytuje žádné možnosti pro zpracování chyb, takže v případě výjimečných situací může být nutné další zpracování chyb.
4. Použití useState může být obtížné pro pochopení a použití začínajícími vývojáři, zvláště pokud se teprve začínají učit React.