Wie kann man in React-Anwendungen effektiv entprellen?

Wie kann ich eine Entprellung durchführen?

Antwort auf die ursprüngliche Frage

Die bereitgestellte Entprellungsfunktion funktioniert nicht, da diese nicht an die gebunden ist handleOnChange-Funktion. Um dies zu beheben:

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

Moderne Entprelltechniken

Versprechen und Haken (empfohlen, 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
  }
});

Versprechen Entprellen

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
};

Rückrufe

Mit ES6-Klasseneigenschaften:

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

Mit ES6-Klassenkonstruktor:

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

Mit ES5:

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

Ereignisbehandlung Pooling in React

In React werden Ereignisobjekte gepoolt und können wiederverwendet werden. Dies kann bei der Verwendung von Debounce oder Throttle zu Problemen führen, da die Ereigniseigenschaften möglicherweise gelöscht werden, nachdem der Ereignisrückruf aufgerufen wurde.

Um dies zu vermeiden, verwenden Sie die Methode persist() für das Ereignisobjekt. Dadurch wird verhindert, dass das Ereignis gepoolt wird, und Sie können asynchron auf seine Eigenschaften zugreifen.

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

Das obige ist der detaillierte Inhalt vonWie kann man in React-Anwendungen effektiv entprellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!