14.08.2023 в 14:50

Как создать собственный хук в вашем приложении ReactJs

Хук в React — это функция JavaScript, которая позволяет инкапсулировать многократно используемую логику и поведение с отслеживанием состояния в функциональных компонентах. Хуки позволяют вам разбивать код на модули, извлекая общие функции из компонентов, способствуя более чистому и удобному в сопровождении коду. С помощью таких хуков, как useState, useEffect и useContext, разработчики могут эффективно управлять состоянием компонентов, обрабатывать побочные эффекты и обмениваться состоянием между компонентами.

В этой статье мы углубимся в создание пользовательского хука, который позволит вам реализовать функцию переключения, которую можно использовать в разных частях вашего приложения React. Мы изучим лучшие практики и предложим решения для потенциальных ошибок, которые могут возникнуть в процессе интеграции. В этом руководстве предполагается знание JavaScript и ReactJS. Обратите внимание, что хотя мы будем использовать «yarn» для управления пакетами, вы можете заменить «npm» там, где это применимо.

Настройка вашего приложения React

Прежде чем мы углубимся в создание пользовательских хуков, убедитесь, что у вас настроено приложение React. Если вы еще этого не сделали, вы можете создать новое приложение React, используя следующую команду:

yarn create vite

После того, как ваш сервер запущен и работает, у вас должна быть структура каталогов, подобная этой:

Создание пользовательского хука переключателя

Внутри папки «src» создайте подпапку с именем «hooks» и добавьте новый файл с именем useToggle.jsx.

project-root/
  src/
    hooks/

Определите свой собственный хук:

import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [state, setState] = useState(initialValue);

  const toggle = () => {
    setState(!state);
  };

  return { state, toggle };
};

export default useToggle;

В приведенном выше коде:

Мы импортируем useState для обработки текущего состояния переключателя.
Создается пользовательский хук useToggle, который принимает необязательный параметр initialValue. Если не указано, значение по умолчанию равно false.
Функция toggle определена внутри хука, переключая состояние между true и false.
Важно помнить, что хуки возвращают логику, а не компоненты пользовательского интерфейса.

Использование пользовательского хука переключателя

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

Импортируйте хук useToggle:

import useToggle from '../hooks/useToggle';

Получите возвращаемые значения от хука, используя деструктурирование:

const { state, toggle } = useToggle();

Реализуйте функцию переключения в пользовательском интерфейсе вашего приложения:

<div>
   <button onClick={toggle}>
       {state ? "Hide" : "Show"}
   </button>
   {state && <h1>Hidden Text</h1>}
</div>

Использование пользовательского хука для компонентов

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

const { state: showData, toggle: toggleData } = useToggle();

В этом руководстве вы узнали, как создать собственный хук, который инкапсулирует функциональность переключения в вашем приложении React. Извлекая общую логику в многократно используемые хуки, вы можете повысить удобство сопровождения кода и способствовать более организованной структуре проекта. Такой подход позволяет эффективно управлять сложным поведением и состоянием функциональных компонентов, делая кодовую базу более чистой и модульной.

Помните, что практика — это ключ к освоению пользовательских хуков и обширной экосистемы React. Когда вы освоитесь с этими хуками, вы сможете изучить другие хуки и поделиться своим опытом с сообществом.

Не стесняйтесь исследовать более сложные пользовательские хуки и экспериментировать с различными вариантами использования, чтобы еще больше укрепить свое понимание этой мощной функции в разработке React.

Ссылка на код здесь.

Источник:

Comment button

#React

163