通过自定义 Hooks 在 React 中重用逻辑：实用指南-js教程-PHP中文网

通过自定义 Hooks 在 React 中重用逻辑：实用指南

WBOY

发布： 2024-08-16 18:42:03

原创

783 人浏览过

Reusing Logic in React with Custom Hooks: a Practical guide

自定义钩子是 React 中的一项强大功能，与 React 内置钩子不同，它用于更具体的目的，并且它是通过将常见功能封装到独立函数中来完成的。自定义钩子促进可重用性，改进组件组织并整体增强代码可维护性。

在本指南中，我们将深入探讨使用自定义钩子的目的，了解创建自定义钩子的基础知识以及如何使用其他组件。然后我们将通过构建 fetch API 自定义挂钩来说明一个现实世界的示例。

了解基础知识

通常开发人员会害怕自定义挂钩这个术语，所以让我们揭开它的神秘面纱。

自定义钩子只是一个以 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(
    <div>{ count }</div>
    <button onClick={increment}> + </button>
    <button onClick={decrement}> - </button>
  )
}

export default Page

登录后复制

使用自定义钩子的真实示例

最重复的逻辑之一是获取 API，电子商务网站将获取用于身份验证、支付过程、显示所有产品、评论、评论等的数据。

您可以想象整个应用程序中重复获取逻辑的数量，可以使用自定义挂钩来简化。

本节将创建一个自定义抓取钩子。

我们将使用 useState 和 useEffect 内置 React hooks
我们将有一个数据状态，一个挂起状态（如果我们想在获取数据时显示旋转器）和一个错误状态（如果获取失败）。

下面的代码是不言自明的。在 useEffect 内部，我们定义了一个异步的 fetchData 函数，它将处理获取逻辑。在 useEffect 下面，自定义钩子将返回以下值，这些值可用于所有其他组件数据、待处理、错误。

请注意，我们正在将 url 值传递给 useFetch 自定义钩子参数，这意味着数据可以传递给自定义钩子

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState<any>([])
  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) <div>Cloud not fetch data from the server</div>

  return(
    {pending ? 
     ( <Spinner />)
     :
     (
      data.map((item) => (
        <div>
          <h3>{item.title}</h3>  
          <p>{item.body}</div>
        </div>
       )
      )
    )}
  )
}

export default Page;

登录后复制