Хуки в React.js

React.js хуки, что это такое и как с ними работать
Метки: / /

В этой статье мы разберём, что такое в React.js хуки, для чего нужны и какие бывают, думаю вам будет интересно.

Также посмотрите статью: «Быстрый старт на React.js», там вы поймёте как работать с React.js.

Что такое хуки в React.js:

Если кратко говоря, то хуки это элемент в React.js который позволяет работать со состояниями, или другими дынными.

Но использовать их стоит только если вы работаете с функциональным компонентом, а не с классовым, так как в классовом уже всё есть для работы.

FaceBook, (тот кто создал React), рекомендует сейчас использовать функциональные компоненты, то есть те, которые создаются через функцию, а не класс, дело в том что для работы с данными по умолчанию в JS не чего нет, поэтому придумали хуки.

Примечание:

Решение добавить в React.js функциональные компоненты было из-за того, что функции работают быстрее чем классы.

Какие хуки есть в React.js:

Теперь разберём какие хуки бывают в React.js, их достаточно много и они есть для всего.

Основные хуки:

Для начала разберём самые основные хуки, их всего три, useState, useEffect и useContext, разберём их подробнее.

useState:

Самый первый это useState, и как понятно из названия это хук позволяет работать со состояниями, вот пример создания хука:

Таким образом мы создали состояние, state хранит состояние, setState это аналог this.setState() в классовых компонентах, то есть служит для изменения его.

В качестве initialState может служить всё что угодно, от обычной простой переменной, до массива и объекта, вот пример по сложнее:

Давайте разберём этот пример, вначале мы создаём состояние, потом возвращаем счётчик в счётчики мы выводим значение и несколько кнопок.

Первая кнопка отвечает за сброс всего состояния, вторя вычитает из счётчика единицу, тут как вы можете заметить используется стрелочная функция, которая в качестве параметра использует prevCount, которое равно предыдущими значению счётчика, то есть мы убываем из прошлого состояния.

Следующая кнопка аналогичная, только уже прибавляет одно значение и как видите в целом не чего сложного тут нет.

Также у многих может возникнуть вопрос как менять объекты, вот вам не большой пример:

Как можете видеть менять объект не так уж и сложно, вам просто нужно возвращать новый объект в который кладёте все предыдущие значение, через ...prev и меняете любое другое значение по его ключу.

С массивом всё точно также, только если нудно взять ключ, мы его берём в квадратные скобки, хотя с объектом можно делать так же, но только в том случае, если в качестве ключа вы передаёте переменную, в других случаях это не имеет смысла.

useEffect:

Теперь перейдём к useEffect, с ним всё на много проще, он используется для отслеживания рендеринга, то есть в него мы передаём функцию которая будет срабатывать при новом рендере контента.

Как видите из не большого примера выше, мы будем выводить в консоль браузера надпись «Произошёл рендеринг».

Но так же вы можете отслеживать рендеринг при изменения конкретного состояния, для этого в useEffect() принимает второй параметр, который равен массиву состояний которых нужно отслеживать.

Состояние всё так же берётся из useState, и здесь мы выводим в консоль браузера надпись «Произошёл рендеринг state», но только при изменение состояния state.

Также эффекты создаёт ресурсы которые нужно отчистить, например, подписки, таймер или событие, вот как можно очистит подписки:

Таким же образом можно можно отключить таймер или удалить обработчик события.

useContext:

Теперь осталось разобрать последний важный хук, useContext, как понятно из названия, он нужен для работы с контекстом.

Примечание:

Контекст даёт возможность брать данные компонентам которые находиться ниже от компонента которые находиться выше при этом не используя пропсы.

Давайте покажу вам не большой пример:

Тут самое интересное, это значение MyContext, если кратко говоря, то это контекст, который возвращается от функции React.createContext, контекст в него передаться в атрибуте value, вот более подробный пример:

Как можете заметить в контекст по умолчанию мы передаём объект themes.light, но уже в value мы передаём themes.dark, и как можете заметить, мы контекст используем уже в кнопки, минув Toolbar, в этом и суть контекста.

Тут я не стал особо много рассказывать про контекст, так как это очень обширная и сложная тема, может в другой раз.

Дополнительные хуки:

Также есть ряд дополнительных хуков о которых я не буду особо много говорить, но их стоит знать, хотя бы для чего каждый нужен.

  • useReducer — Аналог useState, принимает редюсер со состоянием и действием, возвращает изменённое состояние, если вы работали с Redux, то вам это знакомо;
  • useCallback — Возвращает мемоизированный колбэк, в качестве параметров принимает в себя встроенный колбэк и  массив зависимостей;
  • useMemo — Тоже самое что и useCallback, но уже возвращает значение;
  • useRef — Возвращает изменяемый ref-объект, в целом useRef похож на useState, только без функции для изменения и доступ к объекту происходить через свойство .current;
  • useImperativeHandle —  настраивает значение экземпляра, которое предоставляется родительским компонентам при использовании ref;
  • useLayoutEffect — Аналог useEffect, но запускается уже синхронно после всех изменений DOM;
  • useDebugValue — может использоваться для отображения метки для пользовательских хуков в React DevTools;

Как видите их ещё много, но в целом с ними работать примерно также как и с первыми тремя, разницы особо нет.

Вывод:

В этой статье вы прочитаете прочитали про хуки в React.js, тут объяснили что это такое и как используется, думаю вам было интересно.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

55058653