useLoading 钩子函数文档

一、功能说明

useLoading 是一个基于 useBoolean 封装的状态管理钩子函数，用于处理组件的加载状态逻辑。它提供了简洁的 API 来控制加载状态的开启和关闭，适用于页面数据请求、异步操作等需要展示加载状态的场景。

二、核心特性

1. 基于 useBoolean 封装
   复用布尔值状态管理逻辑，包含 loading 状态值、开启状态方法 startLoading、关闭状态方法 endLoading。
2. 可配置初始状态
   支持传入初始值 initValue（默认值为 false），灵活适配不同场景的初始加载需求。
3. 轻量易用
   无需手动维护状态逻辑，直接返回常用操作方法，减少重复代码。

三、API 说明

函数参数

参数名	类型	默认值	说明
initValue	boolean	false	加载状态的初始值

返回值

名称	类型	说明
loading	boolean	当前加载状态值
startLoading	() => void	开启加载状态（设置为 true）
endLoading	() => void	关闭加载状态（设置为 false）

四、使用示例

1. 基础用法

import { useLoading } from '@eco-library/hooks';

function PageComponent() {
  // 初始化加载状态为 false
  const { loading, startLoading, endLoading } = useLoading();

  const handleFetchData = async () => {
    startLoading(); // 开启加载
    try {
      // 模拟异步请求
      await new Promise(resolve => setTimeout(resolve, 2000));
      // 请求成功后关闭加载
      endLoading();
    } catch (error) {
      endLoading(); // 错误处理后关闭加载
    }
  };

  return (
    <div>
      {loading ? <div>加载中...</div> : <button onClick={handleFetchData}>获取数据</button>}
    </div>
  );
}

2. 自定义初始状态

// 初始状态为 true（例如：页面初始化时需要先展示加载状态）
const { loading } = useLoading(true);

五、依赖说明

• 依赖 useBoolean 钩子函数，需确保其路径正确（示例中路径为 '@eco-library/hooks'）。
• 适用于 React 函数组件，需在 React 环境中使用。

六、注意事项

1. startLoading 和 endLoading 方法是同步更新状态，无需担心异步场景下的状态不一致问题。
2. 建议在异步操作的 try/catch 中统一调用 endLoading，确保加载状态始终正确关闭。
3. 若需要更复杂的加载状态（如加载超时、重试逻辑），可在此钩子基础上进一步扩展。