Оглавление

1. Предварительные требования
2. Установка
3. Введение
4. Что такое пользовательские хуки?
5. Когда следует создавать собственный крючок?
6. Пример: создание пользовательского хука
   • Шаг 1. Определите логику многократного использования
   • Шаг 2. Извлечение логики в собственный хук
   • Шаг 3. Использование пользовательского хука
7. Преимущества пользовательских хуков
8. Рекомендации по использованию пользовательских хуков
9. Заключение

Предпосылки:

Убедитесь, что у вас есть необходимые базовые знания в следующих областях:

Базовые знания React
Node.js и npm

Установка:

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

я. Откройте терминал и выполните следующую команду, чтобы создать новый проект:

   npm create vite@latest my-react-app --template react

ii. Перейдите в каталог вашего проекта:

     cd my-react-app

iii. Установите зависимости: Установите необходимые пакеты для вашего проекта:

   npm install

iv. Запустите сервер разработки: Запустите сервер разработки:

    npm run dev

Теперь ваше приложение React будет запущено, и вы сможете просмотреть его в своем браузере по адресу http://localhost:5173.

Введение:

Что такое React Hooks?:

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

Что такое пользовательские крючки?:

Пользовательские перехватчики можно описать как способ повторного использования логики в нескольких компонентах. Вместо повторения кода вы можете инкапсулировать его в собственный хук, что сделает ваши компоненты более чистыми, а вашим кодом — более простым в управлении. точно так же, как и перехватчики React, при использовании пользовательских перехватчиков убедитесь, что вы начинаете имя вашего компонента с (используйте, а затем имя, которое вы хотите дать компоненту, например, useFetchData). UseFetchData может быть пользовательским перехватчиком, который извлекает данные из API и возвращает их в ваш компонент.

понимаете Хуки?

Понимание хуков:
Такие хуки, как useState, useEffect и useContext, позволяют вам использовать состояние и другие функции React без написания класса. Они являются строительными блоками, позволяющими модульно управлять логикой компонентов.

Когда следует создавать собственный хук?

Пользовательские перехватчики позволяют повторно использовать логику с сохранением состояния в разных компонентах. Простым примером является компонент-счетчик, который имеет функции увеличения, уменьшения и сброса. Если вам нужна одна и та же логика в нескольких компонентах, эту логику можно переместить в пользовательский крючок. Другим часто используемым примером является компонент, который извлекает данные из API, и если вам нужна одна и та же логика в нескольких компонентах, вы можете переместить эту логику в собственный хук.

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

Пример: давайте создадим простое приложение-счетчик с перехватчиком React (useState).in app.jsx

Шаг 1. Определите логику многократного использования.

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev   1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    

      

        
Counter App 
        
{counterstate}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

в приведенном выше коде многократно используемая логика включает в себя функции счетчика, начального состояния (o), приращения, уменьшения и сброса. приращение добавляет 1 к начальному состоянию, а декремент вычитает 1 из исходного состояния, а сброс сбрасывает в первое начальное состояние.

Шаг 2: извлечение логики в собственный хук

мы можем создать в папке src папку с именем Hooks, а затем файл с именем useCouter.jsx для пользовательского хука, как показано ниже.

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Шаг 3. Использование специального хука

теперь давайте воспользуемся нашим специальным хуком в App.jsx.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    

      

        
Counter App 
        
{value}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

Пример 2.

Давайте создадим собственный перехват useFetch для всех вызовов API.

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

использование

в App.jsx мы можем использовать этот специальный хук для получения имени пользователя из заполнителя JSON, как показано ниже;

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    

      

        
Counter Appp 
        
{value}
        {loading && 
Loading....
}
        {error && 
Error: {error.message}
}
        {data && data.length > 0 && (
          

            
Username: {data[0].username}
          
        )}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

Преимущества индивидуальных крючков

Возможность повторного использования:

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

Разделение интересов:

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

Компоненты очистителя:

Перенос сложной логики в специальные хуки делает ваши компоненты более простыми и понятными.

Рекомендации по использованию пользовательских хуков

Соглашения об именах:

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

Пример: useFetch, useForm, useAuth.

Обработка зависимостей:

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

Как избежать ненужных повторных рендерингов:

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

Заключение

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

Ознакомьтесь с проектом на GitHub: Мой репозиторий GitHub