react 共用组件如何请求接口
共用组件请求接口的设计方法
在React中设计共用组件时，接口请求通常需要考虑组件的复用性、数据管理以及与父组件的通信。以下是几种常见的设计模式：
通过Props传递数据 父组件负责获取数据并通过props传递给共用组件。这种方式适用于数据来源单一且父组件需要控制数据流的情况。
// 父组件
function ParentComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data').then(res => setData(res.json()));
}, []);
return <SharedComponent data={data} />;
}
// 共用组件
function SharedComponent({ data }) {
return <div>{data?.name}</div>;
}自定义Hook封装请求逻辑 将接口请求逻辑封装成自定义Hook，便于在多个组件中复用。Hook可以返回加载状态、错误处理和返回数据。
function useFetchData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
// 在共用组件中使用
function SharedComponent() {
const { data, loading } = useFetchData('/api/data');
if (loading) return <div>Loading...</div>;
return <div>{data?.name}</div>;
}使用Context共享API数据 当多个层级组件需要访问相同API数据时，可以使用Context提供全局状态管理。
const ApiContext = createContext();
function ApiProvider({ children }) {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data').then(res => setData(res.json()));
}, []);
return (
<ApiContext.Provider value={data}>
{children}
</ApiContext.Provider>
);
}
// 共用组件通过useContext获取数据
function SharedComponent() {
const data = useContext(ApiContext);
return <div>{data?.name}</div>;
}高阶组件封装请求逻辑 通过高阶组件包装共用组件，自动注入数据和处理逻辑。
function withApiData(WrappedComponent, url) {
return function(props) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => setData(res.json()));
}, []);
return <WrappedComponent data={data} {...props} />;
};
}
// 使用高阶组件
const EnhancedComponent = withApiData(SharedComponent, '/api/data');使用状态管理库 在大型应用中，可以考虑使用Redux、MobX等状态管理库集中处理API请求，通过connect或hooks将数据注入组件。
// 使用Redux示例
import { connect } from 'react-redux';
import { fetchData } from './actions';
function SharedComponent({ data, fetchData }) {
useEffect(() => {
fetchData();
}, [fetchData]);
return <div>{data?.name}</div>;
}
const mapState = state => ({ data: state.data });
export default connect(mapState, { fetchData })(SharedComponent);设计考虑因素
依赖注入 组件应该明确声明需要哪些数据依赖，避免内部直接硬编码API地址。可以通过props或context注入API配置。
错误边界 共用组件应该处理各种可能的错误状态（网络错误、数据格式错误等），或者将错误处理委托给父组件。
加载状态 包含清晰的加载状态指示，可以接受loading状态作为prop或自行管理。
TypeScript支持 如果使用TypeScript，应该明确定义组件props类型，包括数据结构和可选状态。
interface SharedComponentProps {
data?: { name: string };
loading?: boolean;
error?: Error;
}通过以上模式，可以构建出灵活、可维护且易于测试的React共用组件，这些组件能够适应不同的数据获取场景和项目架构。
