React で手ぶれ補正フックを使用する方法

Question

rree

私は、useDebounce フックを作成して使用していました。 ただし、サイズ変更イベントで useDebounce を使用すると、いくつかの問題があります。 useDebounce フック は内部で useEffect を使用するため、コンポーネントの最上部で実行する必要があります。 ただし、サイズ変更関数は、以下に示すように useEffect で実行されるように設定されています。

また、上記のコードは値を係数として受け取りますが、以下のコードを使用するにはコールバックとして受け取る必要があると思います。

リーリー

上記のコードを使用して既存の useDebounce を利用するにはどうすればよいですか?

Answer 1

React コンポーネントで debounced 関数を直接使用する場合、レンダリングごとに新しい関数が作成されるため機能しません。代わりに、この useDebounce フックを使用できます:

リーリー

useRef は、最後に提供された関数と同じ関数であることを保証し、useLayoutEffect は、レンダリングのたびに関数への参照が更新されることを保証します。

詳細については、 「最新リファレンス」パターンの反応

を参照してください。

Answer 2

useEffect を通じてデバウンスを実装するのではなく、デバウンス ロジックを関数として実装する方が良いと思います。

useEffect deps によって参照される状態が変化したときに実行されます。つまり、実行過程だけを追っていると見逃しやすいロジックであるため、後のメンテナンス時にこのuseEffectがどの過程から派生したものであるかを把握することが難しく、また、解析することも困難です。デバッグ。 ＃＃＃＃＃＃例＃＃＃＃＃＃

カスタマイズされたデバウンス リーリー リーリー

lodash を使用している場合は、インポートするだけで使用できます。

ロダッシュデバウンス リーリー リーリー ＃＃＃お役に立てれば ：）＃＃＃