React Hooks позволяют вам использовать состояние и другие функции React без необходимости создавать компонент класса React. Используя хуки, вы можете создавать полностью работающие приложения React исключительно с функциональными компонентами. Больше не class Example extends React.component {}требуется.

Основные крючки

Повседневные хуки для повседневного использования.

Основные хуки React
— useState
— useEffect => Эта статья
— useContext => Скоро будет

использованиеЭффект

Официальная документация по использованиюEffect

Аргументы функции useEffect

1. Функция, которая будет выполняться в течение жизненного цикла компонента.
2. Массив значений useEffect отслеживает изменения, вызывающие срабатывание триггера. Передача пустого массива имитирует компоненты componentDidMountи componentWillUnmountметоды React на основе класса.

Описание

useEffectиспользуется для запуска кода после каждого и каждого раза (можно ограничить запуск функции определенными условиями), когда компонент отображается на экране. Можно использовать несколько экземпляров useEffectв одном компоненте, но убедитесь, что они всегда выполняются в одном и том же порядке. Если функции useStateи useEffectне срабатывают в том же порядке, у вас будут очень плохие времена (подробнее о выполнении правильного порядка ниже). useEffectфункции также могут убирать за собой, возвращая функцию.

Примеры

Понимание основного использования и очистки после выполнения.

Следующий код будет выполняться после каждого рендера.

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

Личный сайт
LinkedIn
Instagram