在React中构建自己的自定义Hooks：获取数据的简单指南

1.介绍

在使用React时，管理状态和副作用（如获取数据）可能会变得重复，特别是如果您在多个组件中具有类似的逻辑。这就是自定义Hooks派上用场的地方。它们允许您将可重用的逻辑捆绑到单个函数中，使代码更清晰，更易于管理。

在本文章中，我们将创建一个名为useCountry的自定义Hooks，它从API获取有关国家的信息。我们将分解每个步骤，以确保您可以轻松地遵循。

2.什么是React Hook？

在我们开始自定义hook之前，让我们快速回顾一下React中的一些内置hook：

useState：可以将其视为一个容器，其中保存的信息可以随时间而更改，就像表单中的用户输入一样。

**useEffect：**这就像一个计时器，告诉React在发生某些事情后执行特定的操作，例如从服务器获取数据。

一个简单的例子

假设你正在构建一个简单的表单。您可以使用useState跟踪输入值（如购物清单），并使用useEffect在这些值更改时触发操作（如更新清单）。这些内置的Hooks是创建自定义Hooks的构建块，它允许您在不同的组件之间重用逻辑。

3.构建自定义Hook的分步指南

第一步：定义你的Hook的目的

我们将创建一个名为useCountry的自定义Hooks，它将根据您提供的名称获取国家/地区的详细信息。它将处理加载状态和可能发生的任何错误。挑战：想想定制Hooks的另一个用例。您想获取什么样的数据？

第二步：初始设置

我们将使用 **Axios ** 进行API调用。与Fetch API相比，Axios简化了发送请求的过程，并提供了更好的错误消息。下面是我们自定义Hooks的基本轮廓：

javascript 复制代码

import { useState, useEffect } from 'react';
import axios from 'axios';

function useCountry(countryName) {
  const [data, setData] = useState(null); // Holds fetched country data
  const [loading, setLoading] = useState(true); // Tracks loading state
  const [error, setError] = useState(null); // Tracks errors

  useEffect(() => {
    if (!countryName) return; // If countryName is empty, exit early

    const fetchCountry = async () => {
      setLoading(true); // Start loading
      try {
        const response = await axios.get(`https://restcountries.com/v3.1/name/${countryName}`);
        setData(response.data[0]); // Set country data
      } catch (err) {
        setError(err.response ? err.response.data.message : err.message); // Handle errors
      } finally {
        setLoading(false); // End loading
      }
    };

    fetchCountry(); // Call the function to fetch data
  }, [countryName]); // Re-run if countryName changes

  return { data, loading, error }; // Return state
}

export default useCountry;

要点：

1、Axios自动转换JSON响应，因此您不必手动执行。

2、它提供了更好的错误消息，使调试更容易。

**自己尝试：**将代码复制到编辑器中，然后更改国家名称以查看不同的结果！

第三步：处理边界情况

管理边界情况至关重要-例如国家名称无效或为空时。以下是我们如何增强我们的Hooks：

javascript 复制代码

useEffect(() => {
  if (!countryName) {
    setError('Country name is required'); // Set error if no input
    setLoading(false);
    return; // Exit if country name is empty
  }

  const fetchCountry = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`https://restcountries.com/v3.1/name/${countryName}`);
      setData(response.data[0]);
    } catch (err) {
      setError(err.response ? err.response.data.message : err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchCountry();
}, [countryName]);

示例场景：

**无效的国家/地区名称：**如果您输入"Atlantis"，API将返回404错误，我们可以捕获并显示该错误。

**Empty Input：**如果输入为空，我们将显示一条错误消息，指示需要输入国家/地区名称。

第四步：在组件中使用自定义Hook

现在我们有了useCountry Hooks，让我们在组件中使用它来获取和显示国家详细信息。

javascript 复制代码

import React, { useState } from 'react';
import useCountry from './useCountry';

const CountryInfo = () => {
  const [country, setCountry] = useState(''); // State for country input
  const { data, loading, error } = useCountry(country); // Use custom hook

  const handleInputChange = (e) => {
    setCountry(e.target.value); // Update country state
  };

  return (
    <div>
      <input
        type="text"
        value={country}
        onChange={handleInputChange}
        placeholder="Enter country name"
      />
      {loading && <p>Loading...</p>} // Show loading message
      {error && <p>Error: {error}</p>} // Show error message
      {data && (
        <div>
          <h2>{data.name.common}</h2>
          <p>Population: {data.population}</p>
          <p>Region: {data.region}</p>
        </div>
      )}
    </div>
  );
};

export default CountryInfo;

用户交互

当用户在输入字段中键入"Pakistan"时，我们的组件将获取并显示国家的详细信息。

自己尝试：使用CountryInfo组件创建一个输入字段。输入不同的国家名称时会发生什么？

4.Hooks的最佳实践

约定： 自定义Hooks总是以"use"开头，比如useCountry。这有助于澄清它遵循React的Hooks规则。

**可重用性：**确保你的Hooks足够通用，可以用于多个组件。例如，用于表单处理的钩子可以处理不同的表单。

处理副作用： 在Hooks中始终使用useEffect处理副作用（如API调用）。这使您的组件专注于其主要工作。

5.何时不使用自定义Hooks

自定义Hooks很好，但并不总是需要的。有些时候，他们可能不是最好的选择：

**单用途逻辑：**如果逻辑是特定于一个组件的，并且不会被重用，则不需要创建自定义Hooks。

**简单的状态管理：**如果管理状态很简单（像切换开关），那么制作一个自定义Hooks可能会使事情复杂化。

6.结论

React中的自定义Hooks可以帮助您管理状态和副作用，同时保持组件的清洁和可重用性。我们已经展示了如何使用Axios构建自定义Hooks来获取国家/地区详细信息、管理加载和错误状态以及处理边缘情况。

通过使用自定义Hooks，你可以使你的代码更有组织性和可维护性。开始为数据获取或表单处理等任务创建自己的自定义Hooks吧！