如何在React應用程式中有效地去抖？

如何執行去抖動？

對原始問題的回應

提供的去抖動功能不起作用，因為它未綁定到處理更改函數。要解決這個問題：

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

現代去抖動技術

Promise 和hooks（推薦，2019）

const SearchBox = React.createClass({
render: function() {
return <input type='"search"' name='"p"' 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() 方法。這將防止事件被池化並允許您非同步存取其屬性。

以上是如何在React應用程式中有效地去抖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！