网站建设北京公司,标书制作的六步骤,文具网站建设规划书,制作微信网站模板免费下载在页面上 loading#xff08;加载#xff09;的效果十分常见#xff0c;在某些场景下#xff0c;一个页面上甚至可能有特别多的 loading 存在#xff0c;此时为每一个 loading 专门创建一个 state 显然太过繁琐#xff0c;不如试试写一个 useLoading 来集中管理#xff…在页面上 loading加载的效果十分常见在某些场景下一个页面上甚至可能有特别多的 loading 存在此时为每一个 loading 专门创建一个 state 显然太过繁琐不如试试写一个 useLoading 来集中管理
构思分析
状态形式
当页面上有众多的 loading 时我们需要能区分它们因此 useLoading 存储的 state 应当是 KV 式 或者数组式KV 更方便我们将采用 KV 式K 代表 loading 的标识名称V代表是否 loading。
返回形式
useLoading 应当提供哪些 api 呢返回 state 和 setState 是必要的此外提供根据 K 的 setLoading 以及 根据 K 的 onloading 和 unloading 也是 非常使用的。
初始化方式
既然已经确定了 state 为 KV 式初始化给个对象即可。
代码实现
接口和类型声明
声明 UseLoading 的入参为初始 state 并定义其为泛型默认为 Recordstring, Boolean并按照 useHooks 的习惯返回一个 只读 的数组第一项为 state第二项为 set第三项为 onloading第四项为 unloading。 此外我们需要为 set 额外定义一个接口用于 (K,V) 和 ({k,v}) 两种入参形式的函数重载。
export interface SetLoadingT Recordstring, Boolean | number,K extends keyof T keyof T{(key: K, value?: boolean): void;(key: K, setAction: (pre: boolean | number) boolean): void;(state: RecordK, boolean): void;(setAction: (pre: T) T): void;
}export interface UseLoadingT Recordstring, boolean {(loadingMap: T): readonly [T,SetLoading,(key: keyof T) void,(key: keyof T) void];
}具体实现
export const useLoading: UseLoading T Recordstring, boolean | number(initialLoadingMap: T
) {const [loading, _setLoading] useStateT(initialLoadingMap);const setLoading: SetLoadingT, keyof T (args1 , value true) {if (typeof args1 object) {_setLoading((pre) ({ ...pre, ...args1 }));return;} else if (typeof args1 function) {_setLoading((pre) args1(pre));return;} else {const key args1;if (typeof value function) {_setLoading((pre) ({ ...pre, [key]: value(pre[key]) }));} else {_setLoading((pre) ({ ...pre, [key]: value }));}}};const onLoading (key: keyof typeof loading) {_setLoading((pre) ({ ...pre, [key]: true }));};const unLoading (key: keyof typeof loading) {_setLoading((pre) ({ ...pre, [key]: false }));};return [loading,setLoading,onLoading,unLoading,] as unknown as ReturnTypeUseLoading;
};到这里基础的 useLoading 就实现了以下是简单的使用示例
export default function Demo(){const [loading, setLoading] useLoading({button1: false,button2: false,})const handleClick (key: button1|button2) {setLoading()}return(button onClick{() setLoading(button1)}{loading.button1? loading:button1}/buttonbutton onClick{() setLoading(button1)}{loading.button2? loading:button2}/button/)
}进阶
有时候我们的 loading 只是效果并不阻止用户操作那么当用户连续进行点击等操作时我们希望 loading 效果应当延续下去此时只使用上面的 useLoding 显然乏力我们需要额外维护一个具有计数性质的 state数字数组Promise数组等 配合使用这将使代码变得异常臃肿。
换位思考一下我们需要计数的特性useLoding 使用的 state 是 Boolean那么有没有办法可以同时兼备布尔值和数字的特性呢在 JS/TS 中boolean 本身就支持加减操作加减后会隐式转换为数字答案已经呼之欲出了允许我们的 useLodng 使用数字作为每个 loading 的值即可完美的升级 useLoading并完全兼容基础版的 useLoading我们只需要做一些小小的改变
接口和类型声明
在这里将 boolean 都替换为 boolean | number 即可。 其次我们提供了2个额外的 apiplus 和 minus即递增和递减。 此外我还为 useLoading 新加了一个 returnType 入参的重载因为有些人可能更偏爱对象而不是数组比如笔者自己。
export interface UseLoadingT Recordstring, boolean | number {(loadingMap: T): readonly [T,SetLoading,(key: keyof T) void,(key: keyof T) void,(key: keyof T) void,(key: keyof T) void];(loadingMap: T, returnType: object): Readonly{values: T;set: SetLoading;on: (key: keyof T) void;un: (key: keyof T) void;plus: (key: keyof T) void;minus: (key: keyof T) void;};
}export interface SetLoadingT Recordstring, boolean | number,K extends keyof T keyof T{(key: K, value?: boolean | number): void;(key: K, setAction: (pre: boolean | number) boolean | number): void;(state: RecordK, boolean | number): void;(setAction: (pre: T) T): void;
}代码实现
在这里实现上与 基础的 useLoading 几乎完全相同只是多了几个新的返回和一套对象形式的返回。
// ts-ignore
export const useLoading: UseLoading T Recordstring, boolean | number(loadingMap: T,returnType: array | object array
) {const [loading, _setLoading] useState(loadingMap);const setLoading: SetLoadingT, keyof T (args1, value true) {if (typeof args1 object) {_setLoading((pre) ({ ...pre, ...args1 }));return;} else if (typeof args1 function) {_setLoading((pre) args1(pre));return;} else {const key args1;if (typeof value function) {_setLoading((pre) ({ ...pre, [key]: value(pre[key]) }));} else {_setLoading((pre) ({ ...pre, [key]: value }));}}};const onLoading (key: keyof typeof loading) {_setLoading((pre) ({ ...pre, [key]: 1 }));};const unLoading (key: keyof typeof loading) {_setLoading((pre) ({ ...pre, [key]: 0 }));};const plusLoading (key: keyof typeof loading) {_setLoading((pre) ({ ...pre, [key]: (pre[key] as number) 1 }));};const minusLoading (key: keyof typeof loading) {_setLoading((pre) ({ ...pre, [key]: (pre[key] as number) - 1 }));};if (returnType array) {return [loading,setLoading,onLoading,unLoading,plusLoading,minusLoading,] as const;} else {return {values: loading,set: setLoading,on: onLoading,un: unLoading,plus: plusLoading,minus: minusLoading,} as const;}
};现在一个进阶版的 useLoading 就完成了你完全可以把它当作普通的 useLoading 穿 boolean 用如果有计数的需要你就可以把它当数字用
function sleepT(time: number) {return new Promisevoid(function (resolve) {setTimeout(() {resolve();}, time);});
}export default function Demo(){const { values: loading, plus, minus } useLoading({ button1: false }, object);const click async () {plus(button1)await sleep(1000);minus(button1)}
}return(button onClick{click}{loading.button1? loading:button1}/button/)
}
