如何在React应用程序中有效地去抖？

如何执行去抖动？

对原始问题的回应

提供的去抖动功能不起作用，因为它未绑定到处理更改函数。要解决这个问题：

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

现代去抖动技术

Promise 和 hooks（推荐，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中文网其他相关文章！