Вот что вы узнаете:
- почему React хуки
- как использовать перехватчики React
- как та же логика будет реализована в компонентах класса React
Требования
- ES6 (стрелочные функции, деструктуризация, классы)
- Реагировать
Настройка проекта React
Если вы хотите следовать примерам, обязательно настройте среду разработки React. Запустить:
ловушки для изучения npx create-response-app
и тебе хорошо! (У вас должна быть одна из последних версий Node.js для запуска npx).
Раньше у вас был setState с классами ES6 React
Я не буду здесь углубляться, я предполагаю, что вы уже используете React в своем проекте, но позвольте мне сделать краткий обзор.
React - это библиотека для создания пользовательских интерфейсов, и одним из ее преимуществ является то, что сама библиотека налагает строгий поток данных на разработчика. Вы помните jQuery? С jQuery практически невозможно четко структурировать проект, не говоря уже о том, чтобы определить, как данные должны передаваться через пользовательский интерфейс. Трудно отследить, какая функция какая часть пользовательского интерфейса меняет.
То же самое относится и к простому JavaScript: даже если с самодисциплиной и практикой можно создать хорошо структурированный проект (думая о шаблоне модуля), удачное состояние отслеживания и взаимодействия между функциями (это можно сделать, но без внешняя помощь, см. Redux).
Эти проблемы были несколько облегчены React: за счет обеспечения четкой структуры (контейнер и функциональные компоненты) и строгого потока данных (компоненты реагируют на изменение состояния и свойств) теперь легче, чем раньше, создавать хорошо аргументированные Логика пользовательского интерфейса.
Итак, теория React состоит в том, что часть пользовательского интерфейса может «реагировать» на изменение состояния. До сих пор основной формой для выражения этого потока был класс ES6. Рассмотрим следующий пример, класс ES6, расширяющийся от React.Component, с внутренним состоянием:
Как видно из приведенного выше кода, внутреннее состояние компонента изменяется с помощью setState при нажатии кнопки. Текстовая кнопка по очереди реагирует на это изменение и получает обновленный текст.
Более сжатую версию компонента можно выразить удалением конструктора благодаря полям класса:
Итак, вначале был setState (и будет). Но сохраняйте спокойствие. Вышеупомянутый стиль идеален, и классы ES6 в React не исчезнут в ближайшее время.
Но теперь с помощью перехватчиков React можно выразить изменение внутреннего состояния потока - ›реакция пользовательского интерфейса без использования класса ES6.
Хуки в действии: давайте обновим состояние в React без использования setState
Итак, какие возможности у нас есть для управления внутренним состоянием в React теперь, когда setState и классы больше не нужны?
Введите первый и самый важный перехватчик React: useState. useState - это функция, предоставляемая пакетом реакции. Вы импортируете эту функцию в начало ваших файлов как:
импортировать React, {useState} из «реакции»;
Импортируя useState в свой код, вы сигнализируете о намерении сохранить какое-то состояние внутри вашего компонента React. И что более важно, этот компонент React больше не должен быть классом ES6. Это может быть простая функция JavaScript. Это самая интересная вещь в истории с крючками.
После импорта useState вы выберете массив, содержащий две переменные из useState, и код должен войти в ваш компонент React:
const [buttonText, setButtonText] = useState («Щелкните меня, пожалуйста»);
Смущает этот синтаксис? Это деструктуризация ES6. Вышеупомянутые имена могут быть любыми, для React это не имеет значения. В любом случае я советую использовать описательные и содержательные имена переменных в зависимости от цели государства.
аргумент, переданный в useState, - это фактическое начальное состояние, данные, которые могут быть изменены. useState возвращает вам две привязки:
- фактическое значение для государства
- функция обновления состояния для указанного состояния
Таким образом, в предыдущем примере компонент кнопки с хуками становится следующим:
Для вызова средства обновления состояния setButtonText внутри обработчика onClick можно использовать встроенную стрелочную функцию. Но если вы предпочитаете использовать обычную функцию, вы можете:
Честно говоря, мне нравятся обычные функции больше, чем стрелочные, если у меня нет особых требований. Читаемость значительно улучшается. Кроме того, когда я пишу код, я всегда думаю о следующем разработчике, который будет поддерживать этот код. И мой код должен быть читабельным.
Реагирующие хуки, вот и все! Я мог бы закончить этот пост здесь, но не раньше, чем покажу вам как получать данные с помощью хуков.
Раньше вы использовали componentDidMount для обработки операции выборки данных.
Получение данных в React! Вы помните старые времена componentDidMount? Вы можете щелкнуть fetch (url) в componentDidMount и назвать это днем. Вот как получить массив данных из API для визуализации красивого списка:
Хуки в действии: давайте посмотрим, как хуки будут использоваться для операций выборки данных.
Я думал, что получение данных с помощью хуков React не должно сильно отличаться от useState. Беглый взгляд на документацию подсказал мне: useEffect может быть подходящим инструментом для работы.
Я прочитал: «useEffect служит той же цели, что и componentDidMount, componentDidUpdate и componentWillUnmount в классах React, но объединен в единый API»
Бинго! Это потрясающе, не правда ли? Обладая этими знаниями, я реорганизовал Dataloader для использования useEffect. Компонент становится функцией, а выборка вызывается внутри useEffect. Более того, вместо вызова this.setState я могу использовать setData (произвольная функция, извлеченная из useState):
В этот момент я подумал: «Что может быть не так?» и я запустил приложение. Вот что я увидел в консоли:
Очевидно, это была моя вина, потому что я уже получил представление о том, что происходит:
«useEffect служит той же цели, что и componentDidMount, componentDidUpdate и componentWillUnmount»
componentDidUpdate! componentDidUpdate - это метод жизненного цикла, который запускается каждый раз, когда компонент получает новые реквизиты или происходит изменение состояния.
Это уловка. Если вы вызовете useEffect, как я, вы увидите бесконечный цикл. И для решения этой «ошибки» вам нужно будет передать пустой массив в качестве второго аргумента для useEffect:
Выполнено!
Крючки: Заключение
Перехватчики React - хорошее дополнение к библиотеке. Созданные как RFC в октябре 2018 года, они быстро догнали и перешли на React 16.8. Думайте о перехватчиках React как о инкапсулированных состояниях, находящихся вне ваших компонентов React.
Перехватчики React делают реквизиты рендеринга и HOC практически устаревшими и обеспечивают лучшую эргономику для обмена логикой. С помощью хуков React вы можете повторно использовать общие части логики между компонентами React.
React поставляется с кучей предопределенных хуков. Наиболее важными из них являются useState и useEffect. useState позволяет использовать локальное состояние внутри компонентов React, не прибегая к классам ES6.
useEffect заменяет componentDidMount, componentDidUpdate и componentWillUnmount, предоставляя унифицированный API. Есть много других ловушек, и я предлагаю прочитать официальную документацию, чтобы узнать больше.
Легко предугадать, куда движется React: функциональные компоненты повсюду! Но даже тогда у нас будет 3 способа выражения компонентов в React:
- функциональные компоненты
- компоненты класса
- функциональные компоненты с крючками
Хуки: ссылки для обучения
Я надеюсь, что эта статья поможет вам понять, насколько важны React Hooks и как вы можете их использовать.
