Использование хуков в React

Хуки – это новое дополнение в React 16.8, которое позволяет нам использовать состояние и другие функции React без необходимости написания класса.

Проблемы при использовании хуков

Трудно повторно использовать логику с отслеживанием состояния между компонентами.

React не предлагает способа совместного использования какого-либо повторно используемого поведения между компонентами. Такие шаблоны, как “рендеринг реквизита” и “компоненты высокого порядка” пытаются решить эту проблему, но оба они требуют реструктуризации ваших компонентов.

Гигантские компоненты

Наше приложение растет, так же как и размер компонентов, которые становятся неуправляемыми, и во многих случаях их очень трудно разбить на более мелкие компоненты, потому что логика состояния полностью завершена. Кроме того, каждый метод кода может содержать комбинацию несвязанной логики, которая может привести к ошибкам и несоответствиям.

Запутанные классы

По мере увеличения функциональности приложения мы можем понять, что существует потребность в состоянии, а преобразование функции в класс требует больших усилий. В дополнение к этому, мы должны понимать множество механизмов javascript, таких как привязка и т. д.

Что такое хук

• Хуки – это функции, которые позволяют «подключиться» к функциям состояния и жизненного цикла React из функциональных компонентов.
• Хуки не работают внутри классов

useState

• useState вызывается внутри функционального компонента, чтобы добавить к нему некоторое локальное состояние
• Состояние сохраняется между повторными рендерингами
• Возвращает текущее значение состояния и функцию, которая позволяет его обновлять (stateValue, setterFunction), функция позволяет многократно изменять значение состояния для нескольких значений
• Единственный аргумент useState – это начальное состояние (этот аргумент состояния используется только во время первого рендеринга и не обязательно должен быть объектом)
• Различные имена, присвоенные переменной состояния, не являются частью useState
• React предполагает, что если вы вызываете useState много раз, вы делаете это в одном и том же порядке во время каждого рендеринга

useEffect {# эффекты-без-очистки}

Мы, как правило, использовали выборку данных, подписки или ручное изменение DOM из компонентов React. Эти операции называются побочными эффектами, потому что они могут повлиять на другие компоненты и не могут быть выполнены во время рендеринга.

• useEffect hook добавляет возможность выполнять побочные эффекты из функционального компонента
• Функция useEffect запускается после сброса изменений в DOM
• По умолчанию React запускает эффекты после каждого рендеринга
• Можно использовать более одного раза
• Организует побочные эффекты в компоненте по связанным частям
• Предотвращает дублирование кода

Функция, переданная в useEffect, будет отличаться на каждом рендере. Это позволяет React считывать значение состояния изнутри эффекта, не беспокоясь о том, что оно устареет.

Эффекты с очисткой

• Если ваш эффект возвращает функцию, React запустит ее после очистки.
• Это позволяет нам держать связанную логику ближе друг к другу.
• Функция возврата не обязательна
• React очищает эффекты от предыдущего рендера, прежде чем запускать их в следующий раз.

Как React понимает, какому компоненту соответствует useState

https://reactjs.org/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components

Имена хуков всегда начинаются с use

Рендер-опора

Что такое рендер-опора? Конкретно опора рендеринга – это опора функции, которую компонент использует, чтобы знать, что рендерить. Другими словами, мы передаем функцию, которая возвращает компонент React, имеющий логику рендеринга.

Пример использования:

class Tom extends React.Component{ } class Jerry extends React.Component { constructor(props) { }
}
class ChaseJerry extends React.Component { }