После того, как React Hook был представлен в React v16.8, он стал популярным среди разработчиков FE. После просмотра выступления Софи Альперт и Дэна Абрамова на React Conf 2018 я глубоко впечатлен тем, на что способны хуки и насколько чистым и понятным является код функциональных компонентов React. Хочу подвести итоги и поделиться с вами некоторыми плюсами и минусами.
Плюсы
Прежде всего, самая захватывающая часть хуков для меня заключается в том, что они позволяют нам использовать React и состояние в функциональном компоненте. Это означает, что мы можем поддерживать состояние без определения компонентов класса.
В результате мы смогли избавиться от функций-конструкторов, функций жизненного цикла, области видимости «this», bind(this), HOC, провайдеров контекста. Другими словами, мы можем написать гораздо меньше кода для достижения определенной цели. Мы могли бы определить useEffect для повторного использования компонента ловушки. Одним словом, теперь мы можем больше сосредоточиться на логике.
До сих пор хуки кажутся идеальной заменой классовым компонентам. Тем не менее, у него также есть некоторые недостатки, и поначалу его может быть трудно освоить.
Минусы
Первый недостаток заключается в том, что функция useEffect не будет автоматически обновлять новое состояние. Я бы сказал, что это похоже на функцию setState. Эти функции будут иметь свою собственную область видимости при работе, и это может быть проблемой, когда нам приходится иметь дело со сложной логикой. Нам нужно быть очень осторожными с useEffect, потому что он будет активирован при обновлении.
Вывод
Кратко говоря, Hook — это интересная функция React, и ее нужно хорошо понимать, чтобы не совершать ошибок. Я бы сказал, что его плюсы перевешивают минусы, и его стоит изучить.
Рекомендую вам иметь плагин «eslint-plugin-react-hooks», который очень полезен, когда я начинаю использовать хуки в своем проекте. Я всегда считаю, что практика — лучший учитель, давайте запачкаем руки.
