在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的基本轮廓：

import { useState, useEffect } from 'react';
import axios from 'axios';function useCountry(countryName) {const [data, setData] = useState(null); // Holds fetched country dataconst [loading, setLoading] = useState(true); // Tracks loading stateconst [error, setError] = useState(null); // Tracks errorsuseEffect(() => {if (!countryName) return; // If countryName is empty, exit earlyconst fetchCountry = async () => {setLoading(true); // Start loadingtry {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 changesreturn { data, loading, error }; // Return state
}export default useCountry;

要点：

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

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

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

第三步：处理边界情况

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

useEffect(() => {if (!countryName) {setError('Country name is required'); // Set error if no inputsetLoading(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，让我们在组件中使用它来获取和显示国家详细信息。

import React, { useState } from 'react';
import useCountry from './useCountry';const CountryInfo = () => {const [country, setCountry] = useState(''); // State for country inputconst { data, loading, error } = useCountry(country); // Use custom hookconst handleInputChange = (e) => {setCountry(e.target.value); // Update country state};return (<div><inputtype="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吧！