Reaguj haki
Hooki zostały dodane do Reacta w wersji 16.8.
Hooki umożliwiają komponentom funkcyjnym dostęp do stanu i innych funkcji Reacta. Z tego powodu komponenty klasowe nie są już potrzebne.
Chociaż hooki generalnie zastępują komponenty klas, nie ma planów usuwania klas z Reacta.
Co to jest hak?
Hooki pozwalają nam „zahaczyć się” o funkcje Reacta, takie jak metody stanu i cyklu życia.
Przykład:
Oto przykład hooka. Nie martw się, jeśli to nie ma sensu. Bardziej szczegółowo omówimy w następnej sekcji .
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'));
Musisz importHooki od react.
Tutaj używamy useStatehooka do śledzenia stanu aplikacji.
Stan ogólnie odnosi się do danych aplikacji lub właściwości, które należy śledzić.
Zasady haka
Istnieją 3 zasady dotyczące haków:
- Hooki mogą być wywoływane tylko wewnątrz komponentów funkcyjnych React.
- Hooki można wywoływać tylko na najwyższym poziomie komponentu.
- Hooki nie mogą być warunkowe
Uwaga: Hooki nie będą działać w komponentach klasy React.
Niestandardowe haki
Jeśli masz logikę stanową, która musi być ponownie wykorzystana w kilku komponentach, możesz zbudować własne niestandardowe hooki.
Omówimy bardziej szczegółowo w sekcji Custom Hooks .