React — это библиотека JavaScript для создания пользовательских интерфейсов. Он предлагает способ повторного использования кода и управления состоянием чистым и организованным образом. С выпуском React 16.8 была представлена ​​новая функция под названием Custom Hooks, позволяющая разработчикам создавать свои собственные ловушки для совместного использования и повторного использования логики между компонентами.

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

Что такое пользовательские хуки? Пользовательские хуки — это функции, которые позволяют повторно использовать логику состояния и другую логику между компонентами React. Это способ извлечь логику состояния из компонента и поделиться ею с другими компонентами. Пользовательские хуки начинаются со слова «использовать» и могут вызываться только внутри тела функционального компонента React или другого пользовательского хука.

Зачем использовать пользовательские хуки? Пользовательские хуки позволяют извлекать логику с отслеживанием состояния из компонентов, делая ее многократно используемой и более легкой для понимания. Они могут упростить сложные компоненты и сделать код более читабельным и удобным в сопровождении. Пользовательские хуки также позволяют разработчикам совместно использовать и повторно использовать логику между компонентами, уменьшая необходимость копирования и вставки кода.

Создание пользовательских хуков Чтобы создать пользовательский хук, нам нужно выполнить следующие шаги:

  1. Создайте новую функцию с префиксом «использовать».
  2. Добавьте логику внутри функции
  3. Возвращает состояние и любые вспомогательные функции, которые должны быть доступны для компонента.

Вот пример простого пользовательского хука, который управляет состоянием переключателя:

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. Удачного кодирования!