React アプリケーションで効果的にデバウンスする方法は?

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

元の質問への回答

提供されたデバウンス関数は、 handleOnChange 関数。これを修正するには:

    handleOnChange: function(event) {
        // Make Ajax call
    }.bind(this)

最新のデバウンス技術

Promise とフック (推奨、2019 )

const SearchBox = React.createClass({
render: function() {
return <input type=&quot;search&quot; name=&quot;p&quot; onChange={this.handleOnChange} />;
},
handleOnChange: function(event) {
    // Make Ajax call
  }
});

Promiseデバウンス

import React from 'react';
import awesomeDebouncePromise from 'awesome-debounce-promise';

const SearchBox = () => {
    const [inputText, setInputText] = React.useState('');

    const debouncedSearch = React.useMemo(
        () => awesomeDebouncePromise(args => searchStarwarsHeroAsync(args), 300),
        []
    );

    // ...rest of SearchBox component
};

コールバック

ES6 クラス プロパティの場合:

class SearchBox extends React.Component {
    method = debounce(() => {
        // ...
    });
}

ES6 クラス コンストラクターの場合:

class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.method = debounce(this.method.bind(this), 1000);
    }
    method() { ... }
}

とES5:

var SearchBox = React.createClass({
    method: function() {...},
    componentWillMount: function() {
        this.method = debounce(this.method.bind(this), 100);
    },
});

React でのイベント プーリングの処理

React では、イベント オブジェクトがプールされ、再利用できます。イベント コールバックの呼び出し後にイベント プロパティがクリアされる可能性があるため、デバウンスまたはスロットルを使用するときに問題が発生する可能性があります。

これを回避するには、イベント オブジェクトでpersist() メソッドを使用します。これにより、イベントがプールされることがなくなり、そのプロパティに非同期でアクセスできるようになります。

onClick = (e) => {
    e.persist();
    // ...
};

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