React — один из самых распространенных фреймворков для javascript. На самом деле React является основой множества других фреймворков для веб-разработки (таких как Next.js или Gatsby) или даже для мобильной разработки (React Native). Будучи новичком, я выбрал javascript и выбрал React в качестве своего первого фреймворка для изучения.
На своих первых шагах (документация, туториалы и курсы) с React я много слышал о каких-то «хуках» и не был уверен, что это такое. Я не знал о компонентах класса и их состояниях. Когда я начал углубляться в JavaScript и React, я обнаружил, что хуки — это революционная новая функция, помогающая разработчикам легко управлять функциями React, такими как состояние, жизненный цикл, контекст и ссылки.
Хуки были представлены в версии 16.8.0 16 февраля 2019 года. И, что более важно, команде React удалось внедрить хуки без каких-либо изменений текущего кода. Они даже рекомендовали не переписывать существующий код самостоятельно, если в этом нет необходимости или запланировано.
О хуках
Хуки позволяют нам использовать состояние или другие функции React без написания класса. Хуки позволяют нам писать повторно используемый код для использования состояния и других функций React для наших компонентов без написания классов. Эта независимость дает возможность делиться этим повторно используемым кодом даже не между компонентами в нашем проекте, но даже позволяет нам делиться этими хуками с другими программистами и сообществом.
Функциональные компоненты не имели состояния до React 16.8. Единственный способ реализовать состояние в React — использовать классы. Хуки не работают внутри классов React, но привносят состояния в функциональные компоненты.
Как выглядят функциональные компоненты в React?)
Базовые хуки от команды React и пользовательские хуки
Команда React предоставила нам несколько полезных хуков из коробки. Наиболее важными (как я могу сказать прямо сейчас) являются useState, useEffect, useContext, useCallback и useRef. Когда мы находим это полезным (а это случается довольно часто), мы можем создавать свои собственные хуки. Например, для связи с API, использования специальных, но общих функций и т. д. Или вы можете найти множество пользовательских хуков от других программистов на GitHub, npmjs.org и т. д. Например Таймер. Действительно ли необходимо переписывать Timer каждый раз, когда нам нужно его использовать? С Custom Hooks это не так, и вы можете найти прекрасный useTimer Hook здесь от Amr Labib.
Хук useState
useState — это первый и самый полезный хук, который является функциональным компонентом для объявления состояния, как в классах. Переменные состояния «сохраняются» между вызовами функций, поэтому мы можем использовать их для подсчета или чего-то еще, что мы хотим сохранить для следующих вызовов.
Объявление переменной состояния в классе React и с помощью React useState Hook
Аргумент useState
Единственный аргумент useState — это его начальное состояние. В отличие от классов, начальное состояние не обязательно должно быть объектом, но может быть чем угодно. Вы можете использовать NULL, undefined, String, Int, даже массивы или объекты. И оба они могут быть пустыми.
Установка переменной состояния и деструктуризация массива
useState возвращает пару значений в массиве. Синтаксис JavasScript для «деструктуризации массива» используется при объявлении новой переменной состояния. Значение в первой позиции [0] массива является самой переменной, а во второй позиции [1] — функцией для обновления состояния переменной. Мы можем называть это как хотим, но стандартное — [что-то, setSomething].
Что могут хранить переменные состояния?
Как упоминалось ранее, переменная состояния может содержать основные типы переменных JavaScript, даже массивы и объекты. Мы можем сгруппировать связанные значения вместе или сохранить их в отдельных переменных.
Обновление переменной состояния
Мы должны иметь в виду, что в отличие от this.setState в классах, обновление переменной состояния заменяет ее, а не объединяет. Когда мы хотим использовать предыдущее значение, нам нужно прочитать его при установке нового.
Вывод
Как новичок в мире программирования, я все еще учусь и пытаюсь усвоить как можно больше знаний с практикой. Я решил написать о новых вещах, которые я узнаю в этом процессе, потому что я считаю, что, учась, человек учится. React и его хуки пришли первыми, потому что они кажутся мне действительно интересными и новаторскими. В следующей статье я постараюсь описать и показать основы использования Effect Hook.
