React 自定义 Hooks 指南

React 中的自定义 Hook 是一项强大的功能，它允许我们将组件逻辑提取到可复用的函数中。这些 Hook 是 JavaScript 函数，可以使用 React 提供的其他 Hook。它们使我们能够将逻辑组织到单独的可复用模块中。

📌目录

先决条件
我们的第一个自定义钩子
构建自定义 Hook 的技巧
与自定义钩子共享逻辑
- 构建数据获取钩子
- 构建表单处理钩子
总结

先决条件

在深入研究自定义 Hooks 之前，重要的是要对 React 及其核心概念（例如组件、状态和内置 Hooks（如useState和））有基本的了解useEffect。

我们的第一个自定义钩子

让我们从创建一个简单的自定义钩子开始。我们将构建一个useCounter钩子来封装计数器递增的逻辑。



import { useState } from 'react'

// Custom hook for counter functionality
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue) // State to keep track of count

  // Function to increment count
  const increment = () => setCount(prevState => prevState + 1)

  // Returns count and increment function
  return [count, increment]
}

要使用我们的useCounterHook，我们可以将其包含在功能组件中：



import React from 'react';
import useCounter from './useCounter'

// Component using the useCounter Hook
function CounterComponent() {
  const [count, increment] = useCounter() // Utilizing useCounter

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

构建自定义 Hook 的技巧

首先识别组件中的重复逻辑。
将此逻辑提取到以为前缀的函数中use。自定义钩子应以开头use，例如useFormInput或useFetch。
根据需要在自定义 Hook 中使用 React 的内置 Hook。
返回任何对使用此 Hook 的组件有用的内容。
每个自定义钩子应该负责单个功能。

与自定义钩子共享逻辑

自定义 Hook 非常适合在多个组件之间共享逻辑。在本节中，我们将创建两个 React 开发者经常创建的自定义 Hook，用于在多个组件之间共享逻辑。

构建数据获取钩子

如果我们需要从多个组件中的 API 获取数据，我们可以创建一个useFetchHook。以下是一个简单的实现useFetch：



import { useState, useEffect } from 'react'

// Custom hook for fetching data
function useFetch(url) {

  const [data, setData] = useState(null) // State for data
  const [loading, setLoading] = useState(true) // State for loading
  const [error, setError] = useState(null) // State for error handling

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true)
      setError(null)

      try {
        const response = await fetch(url)

        if (!response.ok) {
          throw new Error(`An error occurred: ${response.statusText}`)
        }

        const jsonData = await response.json()
        setData(jsonData)
      } catch (error) {
        setError(error.message)
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [url]) // Dependency array with url

  return { data, loading, error }
}

我们现在可以在我们的组件中使用这个 Hook 来轻松获取数据：



import React from 'react'
import useFetch from './useFetch'

// Component using the useFetch Hook
function DataDisplayComponent({ url }) {
  const { data, loading, error } = useFetch(url) // Utilizing useFetch

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error: {error}</p>

  return <div>{JSON.stringify(data, null, 2)}</div>
}

构建表单处理钩子

在 React 中处理表单可能比较繁琐。自定义钩子useForm可以简化这个过程。我们可以这样构造它：



import { useState } from 'react'

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue)

  const handleChange = (e) => {
    setValue(e.target.value)
  }

  // Returns an object with value and onChange properties
  return {
    value,
    onChange: handleChange
  }
}

我们现在可以在表单相关组件中使用这个 Hook：



import React from 'react'
import useFormInput from './useFormInput'

function FormComponent() {

  const name = useFormInput('')
  const age = useFormInput('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(`Name: ${name.value}, Age: ${age.value}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          {/* The spread operator here is equivalent to value={name.value} onChange={name.onChange} */}
          <input type="text" {...name} />
        </label>
      </div>
      <div>
        <label>
          Age:
          <input type="number" {...age} />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

💡useFormInput这里提供的是基础版本，旨在实现简单的表单输入管理。如果需要其他功能，例如表单验证或处理更复杂的表单模式，则需要进一步定制和扩展该 Hook。

总结

React 中的自定义 Hooks 提供了一种强大而优雅的方式，可以在组件之间重用和共享逻辑。通过理解和利用此功能，我们可以显著简化组件，并提高代码的可维护性和可读性。

演示|文档

文章来源：https://dev.to/rasaf_ibrahim/a-guide-to-react-custom-hooks-2b4h