当前位置：首页 > React

react共用组件如何请求接口

2026-01-25 10:26:47React

在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适合跨层级数据共享，高阶组件适合增强现有组件，状态管理适合复杂应用状态。

react共用组件如何请求接口