以下是一个在函数组件中使用自定义钩子实现复用的示例:
首先,创建一个自定义钩子,例如一个用于获取数据的钩子:
javascript格式:
import { useState, useEffect } from'react';
function useFetchData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
然后,在函数组件中使用这个自定义钩子:
javascript格式:
import React from'react';
import useFetchData from './useFetchData';
function MyComponent() {
const { data, loading, error } = useFetchData('https://example.com/api/data');
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div>
{data && <div>{data.someProperty}</div>}
</div>
);
}
在上述示例中, useFetchData 钩子负责处理数据获取的逻辑,包括状态管理和副作用。 MyComponent 组件通过调用这个钩子来复用数据获取的功能,而无需在每个需要获取数据的组件中重复编写相同的代码。