react hooks 最实用

www.npmjs.com/package/wr-…

react hooks 方法 & 组件

wr-use/utils 用法

import { useInputValue } from "wr-use/utils"

useInputValue

type : integer : 正整数 decimals : 保留小数 默认8位 minus : 保留小数位数

export declare function useInputValue<T = string | number>(v: T, config?: {
  type: "integer" | "number" | "decimals";
  minus?: number;
}): [T, (e: React.ChangeEvent<HTMLInputElement> | string | number) => void];

import { useInputValue } from "wr-use/utils"
const [demandNum, setDemandNum] = useInputValue<string>("")
const r = <Input value={v} onChange={setV} ></Input>

useFormInput && Antd Form

export declare function useFormInput(
  form: FormInstance, 
  prop: string,
  config: { type: "integer" | "number" | "decimals"; minus?: number }  //  { type: "integer" }
): void;

import { useFormInput } from "wr-use/utils"

const [form] = Form.useForm<FieldType>() 
useFormInput(form, "productCount")

form.setFieldsValue({ a: "3" })

useDebouncePlus 闭包请求回调

interface IDebouncePlusProps<T = any> {
  fn: Fn;
  rFn: Fn<T>;
  errFn?: Fn;
  finalFn?: Fn;
  delay?: number;
}
export declare function useDebouncePlus<T = any>(props: IDebouncePlusProps<T>): Fn<any>;

import { useDebouncePlus } from "wr-use/utils"

const [data, setData] = useState()
const api = useCallback(async (init?: boolean) => {return getList()}, [])
const rApi = useCallback(({ data: dataResult }: Awaited<ReturnType<typeof getDemandList>>) => {
  setData((data) => { 
    return dataResult
  })
}, [])
const apis = useMemo(() => ({ fn: api, rFn: rApi, delay: 1000  }), [api, rApi])
const getList = useDebouncePlus(apis)

useTask

export declare function useTask(
  delay?: number,// default 500 
  type?: 'all' | 'end' // default end 默认执行最后一个函数
): (fn: Fn) => void;

import { useTask } from "wr-use/utils"

const addTaskFn = useTask()
addTaskFn(() => {
  console.log("1")
})
addTaskFn(() => {
  console.log("2")
})
// 2

useDebounce

export declare function useDebounce<T extends (...args: any[]) => any>(fn: T, delay?: number): [T, boolean];

import { useDebounce } from "wr-use/utils"
const payOnClick = useCallback(async () => {
 
}, []);
const [onPayConfirm, payLoad] = useDebounce(payOnClick);
onPayConfirm() // 防抖
payLoad // 是否加载中

usePagination

export declare function usePagination<T extends (...args: any[]) => any>(): [
  {
    showTotal: (total: number) => string;
    showSizeChanger: boolean;
    onChange: (page: number, pageSize: number) => void;
    current: number;
    pageSize: number;
    total: number;
  },
  Dispatch<SetStateAction<{
    current: number;
    pageSize: number;
    total: number;
  }>>,
  MutableRefObject<T | undefined>
];

import { usePagination,useDebounce } from "wr-use/utils"

const [pageProps, setPages, initRef] = usePagination();
const [init] = useDebounce(
  useCallback(() => {
    console.log(pageProps, "分页的数据");
  }, [pageProps]),
);
initRef.current = init;

const r = <Table pagination={pageProps} />