Развитие в качестве разработчика React означает, что рано или поздно вам придется «снять обучающие колеса» и отказаться от использования компонентов React на основе классов. Компоненты класса - отличный способ управлять состоянием в базовом приложении React. Однако 16 февраля 2019 года была выпущена React v16.8 (также известная как The One With Hooks).
ТАК… ЧТО ТАКОЕ КРЮЧКИ?
Хуки - полезный инструмент, который позволяет разработчику использовать методы состояния и жизненного цикла в функциональном компоненте. Если ваши пакеты приложений React имеют версию 16.8.0 или выше, вы можете просто импортировать ловушку в свой компонент и использовать ее по мере необходимости.
Давайте взглянем на несколько наиболее часто используемых крючков. Мы начнем с, вероятно, наиболее часто используемой ловушки - useState.
{useState}
Хук {useState} позволяет управлять состоянием. Синтаксис довольно прост и понятен.
СЦЕНАРИЙ:
Допустим, мы хотели управлять отображением некоторой части контента в нашем функциональном компоненте одним нажатием кнопки:
Сначала мы импортируем {useState} так же, как и при импорте React:
Затем мы выписываем метод {useState}. Этот метод принимает три вещи: часть состояния, которую мы хотим контролировать, связанную функцию, которая будет действовать как setState, и значение по умолчанию для части состояния. Поскольку мы хотим управлять свойством отображения нашего элемента DOM, наша функция useState может выглядеть примерно так:
Здесь мы используем синтаксис, напоминающий синтаксис деструктуризации массива. Сначала мы объявляем наш кусок состояния отображением. Затем идет наша функция setDisplay, которая будет управлять свойством состояния display. Наконец, мы устанавливаем его на ловушку {useState}, которая принимает в качестве аргумента значение по умолчанию display, которое в нашем случае равно true.
Наконец, мы готовы применить свойство состояния display и функцию setDisplay в нашем блоке возврата:
В нашем примере использования выше у нас есть функция onClick, которая вызывает функцию useState setDisplay. Помните, что setDisplay действует как наша функция setState для нашего свойства состояния display. Ниже мы используем тернарный оператор для содержимого ‹div›, который будет определять, установлено ли свойство display CSS для ‹div› на строку «block» или «none». Таким образом, всякий раз, когда нажимается элемент кнопки, функция setDisplay устанавливает значение display равным противоположному значению свойства состояния display. Это, в свою очередь, скроет или покажет элемент ‹div› в модели DOM.
Вот и все. Это, несомненно, сокращает время производства, сохраняя управление состоянием в рамках одного компонента, а также добавляет сухость всему приложению.
В моем следующем посте мы более подробно рассмотрим еще один часто используемый хук React… {useEffect}. Будьте на связи!
