React — это библиотека JavaScript для создания пользовательских интерфейсов. Он предлагает способ повторного использования кода и управления состоянием чистым и организованным образом. С выпуском React 16.8 была представлена новая функция под названием Custom Hooks, позволяющая разработчикам создавать свои собственные ловушки для совместного использования и повторного использования логики между компонентами.
В этом блоге мы разберемся с основами пользовательских хуков и научимся создавать собственные хуки.
Что такое пользовательские хуки? Пользовательские хуки — это функции, которые позволяют повторно использовать логику состояния и другую логику между компонентами React. Это способ извлечь логику состояния из компонента и поделиться ею с другими компонентами. Пользовательские хуки начинаются со слова «использовать» и могут вызываться только внутри тела функционального компонента React или другого пользовательского хука.
Зачем использовать пользовательские хуки? Пользовательские хуки позволяют извлекать логику с отслеживанием состояния из компонентов, делая ее многократно используемой и более легкой для понимания. Они могут упростить сложные компоненты и сделать код более читабельным и удобным в сопровождении. Пользовательские хуки также позволяют разработчикам совместно использовать и повторно использовать логику между компонентами, уменьшая необходимость копирования и вставки кода.
Создание пользовательских хуков Чтобы создать пользовательский хук, нам нужно выполнить следующие шаги:
- Создайте новую функцию с префиксом «использовать».
- Добавьте логику внутри функции
- Возвращает состояние и любые вспомогательные функции, которые должны быть доступны для компонента.
Вот пример простого пользовательского хука, который управляет состоянием переключателя:
import React, { useState } from 'react'; function useToggle(initialValue = false) { const [value, setValue] = useState(initialValue); const toggleValue = () => { setValue(!value); }; return [value, toggleValue]; }
Использование пользовательских хуков Чтобы использовать пользовательский хук, нам нужно импортировать его в наш компонент и вызывать внутри тела компонента. Хук вернет массив значений, который затем можно деструктурировать на отдельные переменные.
Вот пример использования хука useToggle
в компоненте:
import React from 'react'; import useToggle from './useToggle'; function ToggleButton() { const [isToggled, toggleValue] = useToggle(); return ( <button onClick={toggleValue}> {isToggled ? 'Turn Off' : 'Turn On'} </button> ); }
Заключение Пользовательские хуки — это мощный инструмент для повторного использования и облегчения понимания кода. Они позволяют разработчикам извлекать логику с отслеживанием состояния из компонентов и делиться ею с другими компонентами, уменьшая потребность в копировании и вставке кода. Пользовательские хуки могут упростить сложные компоненты и сделать код более читабельным и удобным в сопровождении.
Я надеюсь, что этот блог поможет вам понять и реализовать свои собственные хуки в React. Удачного кодирования!