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

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

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

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

использование состояния

Официальная документация для useState

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

1. Начальное состояние

Массив, содержащий два значения.

1. Последнее состояние
2. Функция для обновления состояния до новых значений

useStateпринимает начальное значение и возвращает два значения: самое последнее состояние и функцию для обновления состояния. Значения возвращаются в виде массива и обычно считываются с использованием синтаксиса деструктурирования массива .

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

Примеры

Понимание useStateвозвращаемых значений.

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

// 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

Меняем медведей на быков.

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

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

// 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;
});

Понимание ленивой инициализации переменных состояния. Официальное объяснение React Docs.

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

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