ReactJS のデバウンス/スロットル技術を使用してサーバー負荷を軽減する

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

デバウンスとスロットリングは、頻繁なイベント (入力、スクロール、サイズ変更など) に応じて関数の実行頻度を制御することでパフォーマンスを最適化するために使用される手法です。

---

1.デバウンスとは何ですか?

デバウンスは、最後に呼び出されてから一定の時間が経過するまで関数の実行を遅らせます。

使用例:

• 検索入力フィールド: キーストロークごとに API 呼び出しをトリガーしないようにします。

React でのデバウンスの例

import React, { useState, useEffect } from 'react';

const DebouncedSearch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedValue, setDebouncedValue] = useState('');

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(searchTerm);
    }, 500); // Delay of 500ms

    return () => {
      clearTimeout(handler); // Cleanup on input change
    };
  }, [searchTerm]);

  useEffect(() => {
    if (debouncedValue) {
      console.log('API Call with:', debouncedValue);
      // Make API call here
    }
  }, [debouncedValue]);

  return (
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
};

export default DebouncedSearch;

---

2.スロットルとは何ですか?

スロットリングにより、関数が指定された時間間隔内に何回トリガーされたかに関係なく、関数がその間隔内で最大 1 回実行されることが保証されます。

使用例:

• スクロール イベント: パフォーマンスを向上させるために、スクロール イベント中にトリガーされる関数の頻度を制限します。

React でのスロットルの例

import React, { useEffect } from 'react';

const ThrottledScroll = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scroll event fired');
    }, 1000); // Execute at most once every 1000ms

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

  return <div>




<hr>

<h3>
  
  
  <strong>3. Using Libraries (Optional)</strong>
</h3>

<p>Instead of implementing custom debounce/throttle, you can use popular libraries like:</p>

<h4>
  
  
  <strong>Lodash</strong>
</h4>

<p>Install:<br>
</p>

<pre class="brush:php;toolbar:false">npm install lodash

使用法:

import { debounce, throttle } from 'lodash';

// Debounce Example
const debouncedFunc = debounce(() => console.log('Debounced!'), 500);

// Throttle Example
const throttledFunc = throttle(() => console.log('Throttled!'), 1000);

反応使用

インストール:

npm install react-use

使用法:

import { useDebounce, useThrottle } from 'react-use';

const Demo = () => {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
  const throttledValue = useThrottle(value, 1000);

  useEffect(() => {
    console.log('Debounced:', debouncedValue);
    console.log('Throttled:', throttledValue);
  }, [debouncedValue, throttledValue]);

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type something..."
    />
  );
};

export default Demo;

---

主な違い

Feature	Debouncing	Throttling
Execution	Executes once after the user stops firing events for a specified time.	Executes at regular intervals during the event.
Use Cases	Search input, resizing, form validation.	Scroll events, button clicks, API polling.
Performance	Reduces the number of function calls.	Limits execution to once per interval.

機能

---

デバウンス中

スロットリング 実行

ユーザーが指定された時間イベントの発生を停止した後に 1 回実行されます。 イベント中に定期的に実行されます。

使用例

検索入力、サイズ変更、フォーム検証。 スクロール イベント、ボタンのクリック、API ポーリング。 パフォーマンス 関数呼び出しの数を減らします。 実行を間隔ごとに 1 回に制限します。

いつ使用するか

デバウンス: ユーザーがアクションを停止するまで実行を遅らせたい場合 (入力が完了するのを待つなど)。 スロットル: 実行速度を制御したい場合 (例: スムーズなスクロールのパフォーマンスを確保する)。 どちらのテクニックも、適切に使用すると、パフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。

以上がReactJS のデバウンス/スロットル技術を使用してサーバー負荷を軽減するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。