Бесклассовые компоненты (также известные как функциональные компоненты) и состояние: краткий обзор с синтаксисом и примерами

Какие крючки?

До React 16.8, выпущенного в феврале 2019 года, если вы хотели использовать состояние в своих компонентах React, вам пришлось бы реорганизовать существующий код с функционального компонента на компонент класса. Однако с этим обновлением React у вас есть возможность использовать хуки , или f, которые позволяют вам подключаться к« состоянию React и функциям жизненного цикла из функциональных компонентов. . » В этой статье основное внимание уделяется подключению к состоянию, но доступны и другие хуки, например, если вы хотите получить доступ к методам жизненного цикла в своих функциональных компонентах, вы бы выбрали ловушку эффекта. Вы можете использовать методы жизненного цикла, такие как componentDidMount и componentDidUpdate, в компонентах вашего класса. Если перехватчики состояния позволяют подключаться к функциональности состояния без использования компонентов класса, перехватчики эффектов позволяют таким же образом подключаться к функциональности жизненного цикла.

Почему изменение?

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

Пример кода: старый путь и новый

Напомним, что в React наши компоненты управляются, то есть они никогда не читают напрямую из DOM, и вместо этого мы используем состояние, например, для управления тем, что вводит в форму пользователь, символ за символом. В приведенном ниже примере я использую компонент класса с состоянием для простой контактной формы, в которой пользователь вводит свое имя, адрес электронной почты и сообщение, которое он хотел бы отправить администратору веб-сайта:

Для целей этого примера этот код не будет отправлять форму по электронной почте или каким-либо другим действием, а вместо этого будет только предупреждать пользователя о том, что введенная информация была отправлена. Опять же, мы используем управляемый компонент, в котором содержимое формы обновляется по мере того, как типы пользователей используют состояние и функцию changeHandler, и отправляются с использованием функции submitHandler , которая предотвращает поведение формы по умолчанию для создания нового сетевого запроса и повторного рендеринга. всю страницу, предупреждает пользователя о том, что форма была отправлена, и сбрасывает поля формы на пустые строки. Давайте посмотрим на тот же самый компонент, который был отрефакторирован для использования функционального компонента с обработчиком состояния:

Давайте рассмотрим некоторые фундаментальные различия между двумя компонентами:

  1. Взгляните на наш оператор импорта, где мы импортируем useState в дополнение к React (строка 1).
  2. Используя деструктуризацию массива в JavaScript, мы создаем новую переменную состояния с useState, например name где первый элемент - это текущее значение, а второй элемент - функция, которая позволяет нам обновлять эту переменную состояния. Мы делаем то же самое для переменных состояния email и message (строки 5–7).
  3. Обратите внимание, что атрибут value в элементах ввода формы больше не ссылается на {this.state.name}, {this.state.email} и {this.state.message}, а вместо этого напрямую ссылается на переменную состояния с помощью {name}, {email} и {message} (строки 24, 26, 28).
  4. Наконец, хотя мы все еще используем submitHandler, в нашем коде больше нет changeHandler, и мы можем вызвать функцию обновления переменной состояния непосредственно в атрибуте onChange входного элемента формы в качестве функции обратного вызова (строки 24, 26, 28).

Дальнейшие соображения

В течение некоторого времени React не предлагал способ эффективного обмена состоянием между компонентами без ручной передачи свойств через каждый отдельный дочерний компонент, а передача этих свойств компонентам, которые не были напрямую связаны между собой, была обременительной и трудной для отслеживания. Возможно, вы знакомы с библиотекой управления состоянием, такой как Redux, которая пытается решить эту проблему. Благодаря перехватчикам React и использованию собственного React Context API внешние библиотеки не обязательно требуются, и я расскажу о контексте в следующей статье, так что следите за обновлениями!

Ссылки и дополнительные ресурсы