react共用组件如何请求接口
在React中实现共用组件的接口请求
共用组件的接口请求需要结合组件的复用性和数据独立性进行设计。以下是几种常见方法：
通过props传递数据
父组件负责获取数据并通过props传递给共用组件：
// 父组件
function ParentComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData);
}, []);
return <SharedComponent data={data} />;
}
// 共用组件
function SharedComponent({ data }) {
return <div>{data?.name}</div>;
}使用自定义Hook封装请求逻辑
创建可复用的数据请求Hook：
function useApiData(endpoint) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch(endpoint)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
});
}, [endpoint]);
return { data, loading };
}
// 在共用组件中使用
function SharedComponent({ apiUrl }) {
const { data, loading } = useApiData(apiUrl);
if (loading) return <div>Loading...</div>;
return <div>{data?.name}</div>;
}通过Context提供全局数据
对于需要在多个组件间共享的数据：
const ApiDataContext = createContext();
function ApiDataProvider({ children, endpoint }) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(endpoint)
.then(res => res.json())
.then(setData);
}, [endpoint]);
return (
<ApiDataContext.Provider value={data}>
{children}
</ApiDataContext.Provider>
);
}
// 共用组件
function SharedComponent() {
const data = useContext(ApiDataContext);
return <div>{data?.name}</div>;
}
// 使用
<ApiDataProvider endpoint="/api/data">
<SharedComponent />
</ApiDataProvider>高阶组件模式
通过高阶组件增强共用组件的数据获取能力：
function withApiData(WrappedComponent, endpoint) {
return function(props) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(endpoint)
.then(res => res.json())
.then(setData);
}, []);
return <WrappedComponent data={data} {...props} />;
};
}
// 基础共用组件
function BaseComponent({ data }) {
return <div>{data?.name}</div>;
}
// 增强后的组件
const EnhancedComponent = withApiData(BaseComponent, '/api/data');使用状态管理工具
结合Redux等状态管理库：
// action
const fetchData = (endpoint) => async (dispatch) => {
const response = await fetch(endpoint);
const data = await response.json();
dispatch({ type: 'SET_DATA', payload: data });
};
// 组件
function SharedComponent() {
const data = useSelector(state => state.data);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchData('/api/data'));
}, [dispatch]);
return <div>{data?.name}</div>;
}每种方法适用于不同场景，props传递适合简单父子组件结构，自定义Hook提供最大灵活性，Context适合跨层级数据共享，高阶组件适合增强现有组件，状态管理适合复杂应用状态。
