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

В этом руководстве мы углубимся в цели использования пользовательских хуков, поймем основы создания пользовательских хуков и способы использования других компонентов. затем мы проиллюстрируем реальный пример, создав собственный хук API fetch.

Понимание основ

Обычно разработчики боятся терминов «пользовательские хуки», поэтому давайте проясним их тайну.

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

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

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

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev   1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

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

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

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

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    
{ count }
       
     - 
  )
}

export default Page

Реальный пример использования пользовательского хука

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

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

в этом разделе создаст собственный крючок выборки.

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

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

обратите внимание, что мы передаем значение URL-адреса в параметр пользовательского перехватчика useFetch, что означает, что данные могут передаваться в пользовательские перехватчики

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

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

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

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) 
Cloud not fetch data from the server

  return(
    {pending ? 
     ( )
     :
     (
      data.map((item) => (
        

          
{item.title}
  
          
{item.body}
        
       )
      )
    )}
  )
}

export default Page;

Заключение

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

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