Debounce & Throttle

Debounce & Throttle

ジッタおよび制限はイベントを制御する方法であり、

を使用して過剰なイベントの発生によるパフォーマンスの低下を防止する.

の代表的な機能は、デバイスと制御イベントの発生を制限する機能です.

ローラを使用して

をスケーリング

クエリーの入力時にクエリーが自動的に完了または関連する暴露

シードデータ露出(スクロールデータ露出)

Debounce ❓

デバッガイベントをグループ化し、連続的に呼び出された関数が最後の関数のみを呼び出す技術

イベントが発生した場合は、しばらく待ってからイベント

を実行します.
同じイベントが一定期間にわたって再び受信された場合、前の要求

がキャンセルされる

上記の図

では、指定された遅延時間内にユーザがイベントをトリガーしないため、1、7、および8個のイベントが実行される.

遅延時間未満の短時間でイベントが発生した2、3、4、5、6はイベントが発生しない

Throttle ❓

一定期間に1回のみ関数を呼び出すことを制限する

所定の時間間隔内に1回まで関数

を呼び出す必要がある.
一定期間に発生したイベントを収集し、周期的に

を実行します.

制限は、ユーザが開始する最新イベント

を一定期間トリガする.

上図には、1、4、7、8回のイベント

が、一定期間(ブルーボックス)発生した最新のイベントが表示されています.

useCallback ❓

反応器では、状態が変化すると、

がそのまま再レンダリングされる.

onChangeは変化し続けるため、再レンダリングが続行され、すべての関数が初期化されるため、throttle、debonseは正常に動作しません.

この時点で使用されるのは、「リカバリホスト」の1つであるuseCallback

です.

useCallbackは注釈のためのhook関数

である.

最初のパラメータに渡された関数を2番目のパラメータの配列に保存する値が変化する場合、

を再利用することができる.

const memoizedCallback = useCallback(함수, 배열);

useCallbackを使用したアンインストール、制限の例

分機

import React from "react";
import _ from "lodash"; // lodash 부르기

const Search = () => {
  const debounce = _.debounce((k) => console.log("디바운스! :::", k), 1000);
  const keyPress = React.useCallback(debounce, []);

  const onChange = (e) => {
    keyPress(e.target.value);
  };

  return (
    <div>
      <label>Search:</label>
      <input onChange={onChange} />
    </div>
  );
};

export default Search;

制限

import React from "react";
import _ from "lodash"; // lodash 부르기

const Search = () => {
  const throttle = _.throttle((k) => console.log("쓰로틀! :::", k), 1000);
  const keyPress = React.useCallback(throttle, []);

  const onChange = (e) => {
    keyPress(e.target.value);
  };

  return (
    <div>
      <label>Search:</label>
      <input onChange={onChange} />
    </div>
  );
};

export default Search;