自定义Hook可以帮助你在React应用中重用一些逻辑。以下是如何使用自定义Hook实现网络请求：

import { useState, useEffect } from 'react';
import axios from 'axios';const useApi = (url) => {const [data, setData] = useState([]);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {setLoading(true);try {const response = await axios.get(url);setData(response.data);} catch (error) {setError(error);}setLoading(false);};fetchData();}, [url]);return { data, loading, error };
};export default useApi;

在这个自定义Hook中，我们命名为useApi。它接受一个URL作为参数，并返回包含数据、加载状态和错误的对象。

使用这个自定义Hook非常简单。只需在你的组件中调用它，并传递API的URL作为参数即可：

import React from 'react';
import useApi from './useApi'; // 导入自定义Hookconst MyComponent = () => {const { data, loading, error } = useApi('http://localhost:3001/data');if (loading) return <div>Loading...</div>;if (error) return <div>Error: {error.message}</div>;return (<div><h1>Data from API:</h1><ul>{data.map(item => (<li key={item.id}>{item.name}</li>))}</ul></div>);
};export default MyComponent;

在这个示例中，我们导入了之前定义的useApi自定义Hook，并在组件中调用它，传递了API的URL。根据加载状态和错误状态，我们渲染不同的内容。

使用自定义Hook能够将重复的逻辑封装起来，使得组件更加简洁和可维护。