qq_42609387 2022-03-04 09:38 采纳率: 50%
浏览 43
已结题

请给这个react-hooks写出代码注释

https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts 打开这个链接,就到代码页面,需要你给这些代码写好注释

export default function useAsyncFn<T extends FunctionReturningPromise>(
  fn: T,
  deps: DependencyList = [],
  initialState: StateFromFunctionReturningPromise<T> = { loading: false }
): AsyncFnReturn<T> {
  const lastCallId = useRef(0);
  const isMounted = useMountedState();
  const [state, set] = useState<StateFromFunctionReturningPromise<T>>(initialState);

  const callback = useCallback((...args: Parameters<T>): ReturnType<T> => {
    const callId = ++lastCallId.current;

    if (!state.loading) {
      set((prevState) => ({ ...prevState, loading: true }));
    }

    return fn(...args).then(
      (value) => {
        isMounted() && callId === lastCallId.current && set({ value, loading: false });

        return value;
      },
      (error) => {
        isMounted() && callId === lastCallId.current && set({ error, loading: false });

        return error;
      }
    ) as ReturnType<T>;
  }, deps);

  return [state, callback as unknown as T];
}

  • 写回答

1条回答 默认 最新

  • iloveozz 2022-03-04 11:16
    关注
    import { DependencyList, useCallback, useRef, useState } from 'react';
    import useMountedState from './useMountedState';
    import { FunctionReturningPromise, PromiseType } from './misc/types';
    
    export type AsyncState<T> =
      | {
          loading: boolean;
          error?: undefined;
          value?: undefined;
        }
      | {
          loading: true;
          error?: Error | undefined;
          value?: T;
        }
      | {
          loading: false;
          error: Error;
          value?: undefined;
        }
      | {
          loading: false;
          error?: undefined;
          value: T;
        };
    
    type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = AsyncState<
      PromiseType<ReturnType<T>>
    >;
    
    export type AsyncFnReturn<T extends FunctionReturningPromise = FunctionReturningPromise> = [
      StateFromFunctionReturningPromise<T>,
      T
    ];
    //定义一个使用异步的hook
    //第一个参数需要被异步执行的函数,fn是一个promise
    //第二个参数 重新生成需要被异步执行函数的依赖项
    //第三个参数 用来初始化异步函数的初始状态
    export default function useAsyncFn<T extends FunctionReturningPromise>(
      fn: T,
      deps: DependencyList = [],
      initialState: StateFromFunctionReturningPromise<T> = { loading: false }
    ): AsyncFnReturn<T> {
    //定义一个ref容器,用来保存上一次调用的Id
      const lastCallId = useRef(0);
      //这个应该是判断组件挂载状态的hook
      const isMounted = useMountedState();
      //使用传入的值初始化异步函数的状态
      const [state, set] = useState<StateFromFunctionReturningPromise<T>>(initialState);
      //定义callback,使用useCallback生成一个缓存的函数对象
      const callback = useCallback((...args: Parameters<T>): ReturnType<T> => {
       //从ref缓存对象中拿出lastclassId,自加并赋值给callId,表示完成一次调用
       //应该是防止缓存的函数被重复调用
        const callId = ++lastCallId.current;
        //判断函数已经被执行
        if (!state.loading) {
        //函数被执行完了,设置函数的执行状态为没有执行
          set((prevState) => ({ ...prevState, loading: true }));
        }
    
    
        //返回 执行异步函数的promise 
        return fn(...args).then(
         //异步函数执行成功,返回函数的执行的成功信息和函数的状态
            (value) => {
           //如果被挂载了判断callId是不是等于lastCallId,判断是不是本次调用
           //是本次调用的设置state的值
           //不是本次调用的返会初始值
            isMounted() && callId === lastCallId.current && set({ value, loading: false });
    
            return value;
          },
          //异步函数执行失败,返回异步函数执行的失败信息和函数的状态
          (error) => {
            isMounted() && callId === lastCallId.current && set({ error, loading: false });
    
            return error;
          }
        ) as ReturnType<T>;
      }, deps);
    
      //将函数的执行信息和缓存的执行异步函数的callback函数返回
      //执行callback会得到一个执行了异步函数的promise,就是useCallback中返回的promise
      return [state, callback as unknown as T];
    }
    

    这个库写的真不错,嘿嘿,这只是我简单了理解,有想法了再补充修改

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月12日
  • 已采纳回答 3月4日
  • 创建了问题 3月4日

悬赏问题

  • ¥15 我这模型写的不对吗?为什么lingo解出来的下面影子价格这一溜少一个变量
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波