React Hooks - czyli haki w React.js
Data: 2021-10-24 | Autor: Admin | Kategoria: React
React Hooks api dodane w React 16.8 pozwala używać różnych funkcjonalności biblioteki React za pomocą “hooków” w funkcjach, niektóre z tych funkcjonalności były dostępne wcześniej jedynie w klasach (“componentDidMount”, “setState”, …).
- useState dodanie lokalnego stanu do komponentu
- useEffect dodanie efektów ubocznych do komponentu
- useReducer zarządzanie stanem, alternatywa do useState
- useContext zwraca aktualną wartość kontekstu
useState
Hook useState zwraca wartość stanu oraz funkcję, która potrafi ten stan zaktualizować. Do useState przekazujemy wartość początkową naszego stanu, może być dowolna wartość. Zmienną przechowującą stan, możemy nazwać jak chcemy. Po wywołaniu normalnej funkcji zmienne są usuwane, nie zachowują stanu z poprzedniego wywołania, w przypadku hooka stanu ta wartość jest przechowywana.
Poniżej przykład komponentu, który wykorzystuje useState do przechowywania wpisanej wartości przez użytkownika.
import React, { useState } from 'react';
const SearchEngine = () => {
const [ searchQuery, setSearchQuery ] = useState('');
const getSearchQuery = e => setSearchQuery(e.target.value);
const handleSearchQuery = () => window.open(`https://www.google.com/search?q=${searchQuery}`);
return (
<>
<input
type="text"
value={searchQuery}
onChange={updateSearchQuery}
/>
<button
onClick={handleSearchQuery}
>
Wyszukaj
</button>
</>
);
}
export default SearchEngine;Możemy równie trzymać wiele “hooków” stanu jeden pod drugim.
useEffect
Przyjmuje jako argument funkcję, która może powodować “efekty uboczne”, na przykład pobranie danych wpływających na inne komponenty.
Funkcja przekazana do “useEffect” zostanie wykonana po każdym renderowaniu, wcześniej mieliśmy do dyspozycji “componentDidMount” i “componentDidUpdate”.
Żeby anulować subskrypcję czy inne “efekty uboczne” musimy w funkcji przekazanej do “useEffect” zwrócić funkcję z kodem, który będzie zawierał instrukcję, z informacją na temat tego, jak chcemy, by React posprzątał po nas (co uchroni nas przed wyciekami pamięci), po odmontowaniu komponentu.
useEffect(() => {
// efekt uboczny jak na przykład timer
// w którym co sekundę dodaje coś do stanu
const clock = setInterval(() => {
setClock((prevState) => prevState + 1);
}, 1000);
return () => {
// czyścimy efekt uboczny przy odmontowaniu
// jeżeli byśmy odmontowali ten komponent bez tego
// to clock co sekundę by próbował aktualizować nieistniejący stan
clock.cleanUp();
};
});Jeżeli chcemy by efekt wykonywał się tylko, jak wartość określonej zmiennej się zmieni(przy kolejnych renderowaniach), to wystarczy, że przekażemy ją w tablicy jako drugi element “hooka” useEffect. Możemy oczywiście w tablicy przekazać większą liczbę wartości.