React におけるデバウンスとスロットリング

React でのデバウンスとスロットリング

デバウンスとスロットリングはどちらも、関数の実行速度を制御する手法であり、サイズ変更、スクロール、入力などのイベントを処理するときにパフォーマンスを向上させるためによく使用されます。簡単な説明は次のとおりです:

---

1. デバウンス

定義: 最後に呼び出されてから指定された遅延の後に関数を実行します。イベントが発生し続けると、タイマーがリセットされます。

ユースケース: ユーザーがイベントのトリガーを停止した後に関数を 1 回だけ実行したい場合。
例: ユーザーが検索ボックスへの入力をやめた後の API 呼び出し。

コード例 (React でのデバウンス)

import React, { useState } from "react";

関数 debounce(func, 遅延) {
タイマーを設定します;
return (...args) => {
クリアタイムアウト(タイマー); // 前回のタイマーをクリアします
timer = setTimeout(() => func(...args), 遅延); // 新しいタイマーを設定します
};
}

const App = () => {
const [値, setValue] = useState("");

const handleChange = debounce((e) => {
console.log("API 呼び出し:", e.target.value);
}, 1000);

戻る (
type="テキスト"
onChange={(e) => {
setValue(e.target.value);
handleChange(e);
}}
値={値}
placeholder="何かを入力してください..."
/>
);
};

デフォルトのアプリをエクスポート;

動作: 関数 (handleChange) は、ユーザーが 1 秒間入力を停止した後にのみ実行されます。

---

1. スロットリング

定義: イベントが発生し続ける場合でも、指定された時間間隔で関数を最大 1 回実行します。

ユースケース: 頻繁なイベント中に関数を一定の間隔で実行したい場合。
例: スクロール中のページの位置を記録します。

コード例 (React でのスロットリング)

React をインポート、「react」から { useEffect };

関数スロットル(関数、制限) {
let lastFunc;
let lastTime;
return (...args) => {
const now = Date.now();
if (!lastTime || now - lastTime >= 制限) {
func(...args);
lastTime = 今;
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastTime >= 制限) {
func(...args);
lastTime = Date.now();
}
}, 制限 - (現在 - 最後の時間));
}
};
}

const App = () => {
const handleScroll = throttle(() => {
console.log("ログに記録されたスクロールイベント:", window.scrollY);
}, 1000);

useEffect(() => {
window.addEventListener("scroll", handleScroll);
return() => window.removeEventListener("scroll", handleScroll);
}, []);

戻る

ページを下にスクロールします;
};

デフォルトのアプリをエクスポート;

動作: handleScroll 関数は、スクロール イベントが連続的に発生した場合でも、最大で 1 秒に 1 回スクロール位置を記録します。

---

以上がReact におけるデバウンスとスロットリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。