DeboringとThrottle

4570 ワード
debounce throttle 第4週 コンセプトコメント テキストリンク

イベントを管理する2つの方法


Debounce


アクティビティが発生した場合、アクティビティを実行するまでしばらく待機します.
同じアクティビティが一定時間存在する場合、以前のリクエストはキャンセルされます.

Throttle


一定時間に発生するイベントを収集し、定期的に実行します.

debonseとthrottleは最適化に役立ちます.

使用例

const Search = () => {
  const [text, setText] = React.useState("");
  const debounce = _.debounce((k) => console.log("디바운스! :::", k), 1000);
  const keyPress = React.useCallback(debounce, []);
  // 함수형 컴포넌트에서는 useCallback과 함께 써야함.
  // text state가 변화할때마다 리렌더링 되는데 이때 debounce 함수도 초기화가 되기 때문에 debounce와 throttle이 제대로 동작을 못함.
  // 그래서 useCallback으로 메모이재이션을 통해 함수가 초기화되는 것을 막아야 한다.

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

  return (
    <div>
      <input onChange={onChange} />
    </div>
  );
};
[OOP]過負荷(vs.過負荷)
C#ストリーム書き込みクラスStreamWriterの基本紹介