React アプリケーションでデバウンスを実装するにはどうすればよいですか?

React でデバウンスを実行するにはどうすればよいですか?

React の人気はコンポーネントベースのアーキテクチャにあります。多くの場合、入力の変更をリッスンし、API 呼び出しをトリガーしてデータを取得するコンポーネントがあります。不要なリクエストを避けるために、これらの API 呼び出しをデバウンスしたいと考えています。

React フックと Suspense を使用してデバウンスします

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

const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

const SearchBox = () => {
  const [inputText, setInputText] = useState('');
  const [searchResults, setSearchResults] = useState(null);

  const fetchResults = async (text) => {
    const response = await fetch(`/search?text=${text}`);
    const data = await response.json();
    setSearchResults(data);
  };

  const debouncedFetchResults = debounce(fetchResults, 500);

  useEffect(() => {
    if (!inputText) {
      return;
    }
    debouncedFetchResults(inputText);
  }, [inputText, debouncedFetchResults]);

  return (
    <>
      <input type="search" value={inputText} onChange={(e) => setInputText(e.target.value)} />
      <Suspense fallback={<div>Loading...</div>}>
        {searchResults && <Results results={searchResults} />}
      </Suspense>
    </>
  );
};

この例では、debounce 関数を使用して fetchResults 関数をラップし、非アクティブ状態が 500 ミリ秒続いた後に API 呼び出しを実行します。 inputText の状態が変化するたびに関数をデバウンスします。次に、Suspense を使用して、結果がフェッチされている間にプレースホルダーをレンダリングします。

クラス コンポーネントを使用したデバウンス

React フックが推奨されていますが、クラス コンポーネントを使用してデバウンスすることもできます。

import React, { Component } from 'react';

const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

class SearchBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: '',
      searchResults: null
    };
    this.debouncedFetchResults = debounce(this.fetchResults, 500);
  }

  fetchResults = async (text) => {
    const response = await fetch(`/search?text=${text}`);
    const data = await response.json();
    this.setState({ searchResults: data });
  };

  handleInputChange = (e) => {
    const text = e.target.value;
    this.setState({ inputText: text });
    this.debouncedFetchResults(text);
  };

  render() {
    return (
      <>
        <input type="search" value={this.state.inputText} onChange={this.handleInputChange} />
        {this.state.searchResults && <Results results={this.state.searchResults} />}
      </>
    );
  }
}

イベント プーリングによるデバウンス

React でイベント ハンドラーをアタッチするときは、次のことに注意してくださいイベント オブジェクトは GC 圧力を軽減するためにプールされます。ハンドラー呼び出しに対して非同期でイベント プロパティにアクセスする場合は、e.persist() メソッドを使用して、イベントがプールに返されるのを防ぐことができます:

const onClick = (e) => {
  e.persist(); // Prevent the event object from being returned to the pool
  setTimeout(() => {
    // Access event properties here
  }, 0);
};

<button onClick={onClick}>Click Me</button>

以上がReact アプリケーションでデバウンスを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。