React Hooks - Хуки

Состояние приложения

В этом разделе речь пойдёт о таком крайне важном в настоящее время элементе приложения как состояние. React даёт нам возможность работать с состоянием компонента. Дочерний компонент может узнать об изменении состояния родителя через props. Но как быть, когда компоненты не имеют общего предка? Приложение постоянно получает и посылает данные на сервер, как об этом может знать множество компонентов? Можно ли хранить данные приложения в каком-нибудь централизованном хранилище, чтобы к нему имели доступ желаемые компоненты? Эти и масса похожих вопросов небезосновательны. Они требуют серьёзного рассмотрения, так как неизбежно возникают по мере роста приложения.

В настоящее время требования к одностраничным JavaScript-приложениям становятся все более сложными. В связи с этим наш код как никогда нуждается в наличии состояния, и управлении им. Состояние может включать ответы сервера, кэшированные данные, а также данные, созданные локально, но пока не сохранённые на сервере. Структура состояния тоже становится всё сложнее, поскольку нам необходимо управлять активными маршрутами, выбранными вкладками, спинерами, контролами пагинации и так далее.

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

предупреждение

Хуки не работают внутри классов — они дают вам возможность использовать React без классов.

useState - Хук состояния 📌

Первый хук, который мы изучим, это функция useState.

В этом примере, useState — это хук. Мы вызываем его, чтобы наделить наш функциональный компонент внутренним состоянием. React будет хранить это состояние между рендерами. Вызов useState возвращает массив с двумя элементами, который содержит: текущее значение состояния(getter) и функцию для его обновления(setter). Эту функцию можно использовать где угодно, например, в обработчике событий. Единственный аргумент useState — это начальное состояние. В примере выше — это 0, так как наш счётчик начинается с нуля. Исходное значение аргумента используется только при первом рендере.

useEffect - Хук эффекта ⚡️

Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из React-компонента. Мы расцениваем эти операции как «побочные эффекты» (или сокращённо «эффекты»), так как они могут влиять на работу других компонентов и их нельзя выполнить во время рендера. С помощью хука эффекта useEffect вы можете выполнять побочные эффекты из функционального компонента.

К примеру, этот компонент получает данные c сервера и отображает их в компоненте FlatList. Для того чтобы увидеть данные в превью, необходимо выбрать устройство iOS или Android по желанию.

Правила хуков

Хуки — обычные JavaScript-функции, но существует два правила, которым нужно следовать.

Используйте хуки только на верхнем уровне

Не вызывайте хуки внутри циклов, условных операторов или вложенных функций. Вместо этого всегда используйте хуки только внутри React-функций, до возврата какого-либо значения из них. Исполнение этого правила гарантирует, что хуки вызываются в одинаковой последовательности при каждом рендере компонента. Это позволит React правильно сохранять состояние хуков между множественными вызовами useState и useEffect.

Вызывайте хуки только из React-функций

Не вызывайте хуки из обычных функций JavaScript. Вместо этого можно:

• Вызывать хуки из функционального компонента React.
• Вызывать хуки из пользовательского хука. Следуя этому правилу, можно гарантировать, что вся логика состояния компонента чётко видна из исходного кода.

Чтобы соблюдать правила хуков используйте плагин для ESLint

О том как самому создать пользовательский хук читайте здесь

Проблемы?

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы

Функции, с помощью которых вы можете «подцепиться» к состоянию и методам жизненного цикла React из функциональных компонентов?

1. Зацепы
2. Прицепы
3. Хуки

Хуки — нововведение в React, которое позволяет использовать состояние и другие возможности React без написания классов c версии:

1. React 16.5
2. React 16.8
3. React 16.9

Как называется хук состояния приложения?

1. useState
2. useEffect
3. useReduce

С помощью какого хука вы можете выполнять побочные эффекты из функционального компонента?

1. useState
2. useEffect
3. useReduce

Хуки вызываются из циклов, условных операторов или вложенных функций?

1. true
2. false

Хуки можно вызывать только из React-функций?

1. true
2. false

Done

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

Ссылки:

1. React Native
2. Learn React