useLockFn 中 useCallback の用途

6034 ワード
テキストリンク
ahooks 库里面あり useLockFn

    import { useRef, useCallback } from 'react';
    function useLockFn<P extends any[] = any[], V extends any = 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],
      );
    }
    export default useLockFn;


它的効果は拦截重复的异步请求( demo: https://ahooks.js.org/hooks/advanced/use-lock-fn )
我删掉了其中的 useCallback 発现还是能拦截的( demo: https://codepen.io/yuanruqian/pen/eYWgVpM )useCallback の効果は什么
issue 问了下 ahooks 的人 について
他の们的回复是:是考的パフォーマンス的问题才加的
に基づいて 我写了两個のデモ
  • 追加 useCallback 返されたメモ化された関数の子パッケージへの不要な感染を回避します.
    https://codepen.io/yuanruqian/pen/yLbgqEm
  • なし useCallback 、毎回返されるのは新しく生成された関数の 1 つです.

    • 同時に、他のユーザーの回顧に基づいて、私はまた、ここにある 1 つの坑道を発見しました.
  • memo の関数の追加 useLockFn または useRef のたびに、父のパッケージが新しく更新され、新しい関数の useCallback が生成され、追加された useLockFn は「不要な影響を防ぐ」重度の感染を検出しませんでした
    デモ: https://codepen.io/yuanruqian/pen/rNmjreX

    • ところで、このフックは以下の条件で「不必要な重度の感染を防ぐ」ことができます
  • 転送された useCallback の関数は変更されません ( useLockFn または useRef を使用して処理を行う必要があります)
  • この機能を使用するためのパッケージは、useCallback を使用して保存する必要があります
    (これは memo の 1 つの坑であるとも言えます.これは、必要になることがあり、useCallback を組み合わせて使用​​することで、再感染を防ぐことができるためです)
  • パッケージには他に変更された状態のフックがありません.

    これらの条件を満たさない場合、memo は単に空間と時間のソースを占有するだけです ( useState 内部実装前の状態の占有が保存され、毎回 deps 数の組み合わせの変化占有時間が比較されます).

    さらに、これらの条件を計算できるようにするには、大部分の開発目標に関して、React に感染した UI の速度は非常に速いです.当然のことながら、再レンダリングの時間の消費量は、より遅いものもあるとは言えません(一部のコンポーネントは遅いかもしれませんが、ここではいくつかの「パフォーマンスの最適化」が必要であるとは限りません).

    推荐阅读
  • https://codepen.io/yuanruqian/pen/yLbgqEm
  • When to useMemo and useCallback
  • React Hooks 第一期：聊聊 useCallback - SToneX的文章 - 知乎
    • コンストラクターはもうありません |反応する
    MD 5を使用して暗号化