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
- useState
- useEffect => Ten artykuł
- useContext => Już wkrótce

UżyjEfekt

Oficjalna dokumentacja użytkowaniaEfekt

argumenty funkcji useEffect

1. Funkcja do wykonania podczas cyklu życia komponentu.
2. Tablica wartości useEffect obserwuje zmiany wyzwalające wyzwolenie. Przekazywanie pustej tablicy naśladuje komponenty componentDidMounti componentWillUnmountmetody React oparte na klasach.

Opis

useEffectsłuży do uruchamiania kodu po każdym wyrenderowaniu komponentu na ekranie (możliwe jest ograniczenie uruchamiania funkcji do określonych warunków). Możliwe jest użycie wielu wystąpień useEffectw jednym komponencie, ale upewnij się, że zawsze działają one 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). useEffectfunkcje mogą również posprzątać po sobie, zwracając funkcję.

Przykłady

Zrozumienie podstawowego użycia i czyszczenia po wykonaniu.

Poniższy kod będzie wykonywany po każdym renderowaniu.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

Strona osobista
LinkedIn
Instagram