自定义hooks

作为react的使用者，自定义hooks是常见的业务需求，小弟技术水平有限，只能先借花献佛聊下公司里大佬们封装的自定义hooks了

import { useRef, useCallback } from 'react';

/**
 * 用于给一个异步函数增加竞态锁，防止并发执行。
 * @param fn
 * @returns
 */
export function useLockFn<P extends any[] = any[], V = any>(
  fn: (...args: P) => Promise<V>
) {
  const lockRef = useRef(false);

  return useCallback(
    async (...args: P) => {
      if (lockRef.current) return;
      lockRef.current = true;

      try {
        const ret = await fn(...args);
        lockRef.current = false;
        return ret;
      } catch (e) {
        lockRef.current = false;
        throw e;
      }
    },
    [fn]
  );
}

用于给一个异步函数增加竞态锁，防止并发执行。

用法如下

import React, { useState } from 'react';
import { useLockFn } from '@pansy/react-hooks';
import { message, Button } from 'antd';

function mockApiRequest() {
  return new Promise<void>((resolve) => {
    setTimeout(() => {
      resolve();
    }, 2000);
  });
}

export default () => {
  const [count, setCount] = useState(0);

  const submit = useLockFn(async () => {
    message.info('Start to submit');
    await mockApiRequest();
    setCount((val) => val + 1);
    message.success('Submit finished');
  });

  return (
    <>
      <p>Submit count: {count}</p>
      <Button onClick={submit}>Submit</Button>
    </>
  );
};

个人的分享记录，不喜勿喷。