Hooki React umożliwiają korzystanie ze stanu i innych funkcji React bez konieczności budowania komponentu klasy React. Korzystając z hooków, możesz konstruować w pełni działające aplikacje React wyłącznie z komponentami funkcyjnymi. Nie więcej class Example extends React.component {}wymagane.

Podstawowe haczyki

Codzienne haczyki do codziennych zastosowań.

React Basic Hooks
- useEffect
- useState => Ten artykuł
- useContext => Już wkrótce

stan użycia

Oficjalna dokumentacja do użytku Stan

const [state, setState] = useState(initialState);

1. Stan początkowy

Tablica zawierająca dwie wartości.

1. Najnowszy stan
2. Funkcja aktualizująca stan do nowych wartości

useStateprzyjmuje wartość początkową i zwraca dwie wartości: najnowszy stan i funkcję aktualizującą stan. Wartości są zwracane w postaci tablicy i są zwykle odczytywane przy użyciu składni destrukturyzacji tablicy .

setStatejest funkcją asynchroniczną, dlatego ważne jest, aby pamiętać, że jej ukończenie może zająć trochę czasu. Czasami nowy stan wymaga obliczenia stanu poprzedniego. Obliczenie nowego stanu na podstawie starego stanu można wykonać, przekazując funkcję do setStatemetody podanej w drugim ( [1]w tablicy javascript) argumencie zwróconej tablicy. Ważne jest, aby upewnić się, że funkcje useStatei useEffectsą wykonywane za każdym razem w tej samej kolejności. Jeśli funkcje useStatei useEffectnie uruchamiają się w tej samej kolejności, będziesz miał bardzo zły czas (więcej na temat poprawnej kolejności poniżej). W dokładnych obliczeniach zostaną zwrócone, gdy kolejność funkcji nie zostanie zachowana.

Przykłady

Zrozumienie useStatezwracanych wartości.

Poniższy kod można wyrazić na wiele sposobów.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Zmiana niedźwiedzi w byki.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

Poniższy kod doda 27 do poprzedniego stanu.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Zrozumienie leniwej inicjalizacji zmiennych stanu. React Docs Oficjalne wyjaśnienie.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Strona osobista
LinkedIn
Instagram