Краткое введение
Нет сомнений в том, что внедрение React Hooks значительно повысило привлекательность React для определенных разработчиков. Вы избавляетесь от зависимости от классов и избавляетесь от ужасающих вещей: this, this, this.
Этот небольшой пост будет краткой и лаконичной статьей, в которой показано, как взять компоненты, построенные с помощью классов, и превратить их в простые функции.
Компонент нашего класса
Вы можете видеть выше, что у нас есть класс под названием Input, который расширяет класс Component из React. Мы также должны вызвать конструктор, в котором мы устанавливаем наше начальное состояние. Кроме того, у нас есть множество стрелочных функций, которые выполняют некоторые небольшие задачи, такие как обновление имени пользователя, обработка некоторых изменений содержания, отправка сообщения и т. Д.
Цель этих функций не является предметом внимания этого поста, и поэтому мы не будем вдаваться в сферу обсуждения бизнес-логики и того, почему они чрезвычайно просты (на самом деле, большая часть кода в этих функциях была удалена, чтобы сделать код более читабельным).
Однако обратите внимание, как мы используем this.setState () и this.props в этих функциях. Использование ключевого слова «this» несколько сбивает с толку некоторых разработчиков (и не забывать привязать это, когда не используются стрелочные функции, является распространенной ошибкой среди даже ветераны в сообществе разработчиков). Спросите Дэна Абрамова, он вам ответит.
Мы также должны помнить о вызове метода render (), который является особым требованием в классе React.
Как видите, есть множество вещей, которые вы должны помнить, если собираетесь использовать классы:
- Знать, как конструктор () работает в классе.
- Точно знайте, на что вы ссылаетесь, используя ключевое слово «это».
- Помните, что вы должны никогда не устанавливать состояние напрямую, а всегда использовать метод setState ().
- Не забудьте включить метод render ().
- Если вы используете контекст React, поймите, как используется Потребитель контекста.
Давайте посмотрим, как изменится код, когда мы перенесем его на бесклассовый компонент.
Наш бесклассовый компонент
Я не буду вдаваться в подробности о том, как работают useState () и useContext () (дополнительную информацию см. В официальных документах React на Hook). , но я хотел указать на несколько вещей.
- Мы можем удалить и избавиться от нашей зависимости от импорта компонентов из библиотеки «реагировать», поскольку мы просто пишем функцию.
- Мы используем useState () для одновременной настройки переменной, а также функции для ее обновления (т. Е. В приведенном выше коде это messageContent и setMessageContent соответственно).
- Мы удаляем наши теги ‹Context.Consumer /› и строго используем имя переменной (например, userData в данном случае) благодаря useContext () крючок.
- Мы больше не пользуемся «this» где-либо в нашем компоненте. Это избавляет от необходимости понимать ключевое слово «this», а также от необходимости связывать функции.
- Мы больше не полагаемся на setState (), поскольку мы объявили нашу собственную функцию для обновления состояния (например, setMessageContent () в этом примере).
- Мы сделали наш код менее подробным и сократили длину компонента примерно на 20% (результаты БУДУТ различаться от компонента к компоненту).
Слишком близко
Я надеюсь, что эта статья поможет вам увидеть возможности преобразования ваших компонентов из классов в структуру без классов. Вам не нужно возвращаться и переписывать всю кодовую базу, но в будущем, я надеюсь, вы рассмотрите возможность использования этой техники в своих компонентах и / или своих будущих проектах. Цель состоит в том, чтобы вас немного больше интересовало не использование классов, а немного больше интересовали React Hooks.
