Reagovat Hooks
Háky byly přidány do Reactu ve verzi 16.8.
Háčky umožňují funkčním komponentům přístup ke stavu a dalším funkcím React. Z tohoto důvodu již nejsou komponenty třídy obecně potřeba.
Ačkoli Hooks obecně nahrazují komponenty tříd, neexistují žádné plány na odstranění tříd z Reactu.
Co je to háček?
Háky nám umožňují „zaháknout“ do funkcí Reactu, jako jsou metody stavu a životního cyklu.
Příklad:
Zde je příklad Hooka. Nedělejte si starosti, pokud to nedává smysl. Podrobněji se budeme věnovat v další části .
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Musíte importHáčky z react.
Zde používáme useStateHook ke sledování stavu aplikace.
Stav obecně odkazuje na aplikační data nebo vlastnosti, které je třeba sledovat.
Pravidla háku
Pro háčky platí 3 pravidla:
- Háky lze volat pouze uvnitř komponent funkce React.
- Háky lze volat pouze na nejvyšší úrovni komponenty.
- Háčky nemohou být podmíněné
Poznámka: Háčky nebudou fungovat v komponentách třídy React.
Vlastní háčky
Pokud máte stavovou logiku, kterou je třeba znovu použít v několika komponentách, můžete si sestavit své vlastní háky.
Podrobněji se budeme věnovat v sekci Vlastní háčky .