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共用组件，这些组件能够适应不同的数据获取场景和项目架构。