美文网首页
React自定义hook 给异步函数增加竞态锁,防止并发执行。

React自定义hook 给异步函数增加竞态锁,防止并发执行。

作者: 学生黄哲 | 来源:发表于2022-01-12 15:53 被阅读0次

    useLockCallback 和 useCallback用法一致,使用ref标记防止并发执行

    import { useCallback, useRef } from 'react';
    
    export default function useLockCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList) {
      const lock = useRef(false);
      return useCallback(async (...args) => {
        if (lock.current) return;
        lock.current = true;
        try {
          const req = await callback(...args);
          lock.current = false;
          return req;
        } catch (e) {
          lock.current = false;
          throw e;
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, deps);
    }
    

    相关文章

      网友评论

          本文标题:React自定义hook 给异步函数增加竞态锁,防止并发执行。

          本文链接:https://www.haomeiwen.com/subject/vwmwcrtx.html