Comment anti-rebond efficacement dans les applications React ?-js tutoriel-php.cn

Comment anti-rebond efficacement dans les applications React ?

Mary-Kate Olsen

Libérer： 2024-12-09 16:05:11

original

435 Les gens l'ont consulté

How to Effectively Debounce in React Applications?

Comment puis-je effectuer un anti-rebond ?

Réponse à la question d'origine

La fonction anti-rebond fournie ne fonctionne pas car elle n'est pas liée au fonction handleOnChange. Pour résoudre ce problème :

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

Copier après la connexion

Techniques anti-rebond modernes

Promesses et crochets (recommandé, 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
  }
});

Copier après la connexion

Promesse anti-rebond

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

Copier après la connexion

Rappels

Avec les propriétés de la classe ES6 :

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

Copier après la connexion

Avec le constructeur de classe ES6 :

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

Copier après la connexion

Avec ES5 :

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

Copier après la connexion

Événement de gestion pooling dans React

Dans React, les objets événementiels sont regroupés et peuvent être réutilisés. Cela peut entraîner des problèmes lors de l'utilisation de l'anti-rebond ou de la limitation, car les propriétés de l'événement peuvent être effacées après l'appel du rappel de l'événement.

Pour éviter cela, utilisez la méthode persist() sur l'objet événement. Cela empêchera l'événement d'être regroupé et vous permettra d'accéder à ses propriétés de manière asynchrone.

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!