useLoading

useLoading 是一个基于布尔值的简单加载状态管理 Hook，它提供了 loading 状态及开始/结束加载的快捷函数，便于在不同场景下快速切换“正在加载”与“加载完成”的标识。

函数签名


function useLoading(initValue?: boolean): {
  loading: boolean;
  startLoading: () => void;
  endLoading: () => void;
}

参数

参数	类型	默认值	说明
`initValue`	`boolean`	`false`	初始化的加载状态，默认 `false` 表示未加载。

返回值

字段	类型	说明
`loading`	`boolean`	当前是否处于加载状态。
`startLoading`	`() => void`	将 `loading` 切换为 `true`。用来表示开始加载。
`endLoading`	`() => void`	将 `loading` 切换为 `false`。用来表示加载结束。

使用示例


import React, { useEffect } from 'react';
import useLoading from '@/hooks/useLoading';
 
export default function Demo() {
  const { loading, startLoading, endLoading } = useLoading();
 
  useEffect(() => {
    startLoading();
    // 模拟加载过程
    const timer = setTimeout(() => {
      endLoading();
    }, 2000);
 
    return () => clearTimeout(timer);
  }, [startLoading, endLoading]);
 
  return (
    <div>
      {loading ? <p>加载中...</p> : <p>加载完成</p>}
    </div>
  );
}

在上述示例中：

初始值 initValue 默认是 false，即不处于加载状态。
使用 startLoading() 将 loading 置为 true，然后两秒后通过 endLoading() 将其重置为 false。
可在页面或逻辑中自由控制加载状态，用于渲染相应的 UI。这样就很容易管理异步操作或延迟渲染的流程。