Effectuer des anti-rebond dans React.js

2019: essayez de crochets + promesse anti-rebond

C'est la plus à jour la version de comment je pourrais résoudre ce problème. Je voudrais utiliser:

• génial d'anti-rebond-la promesse d'anti-rebond de la fonction async
• utilisez-constant pour stocker sans rebond de la fonction dans le composant
• réagir-async-crochet pour obtenir le résultat dans mon composant

C'est une première câblage, mais de la rédaction primitive des blocs sur votre propre, et vous pouvez faire votre propre crochet de sorte que vous ne devez faire qu'une seule fois.

const useSearchStarwarsHero = () => {
  //Handle the input text state
  const [inputText, setInputText] = useState('');

  //Debounce the original search async function
  const debouncedSearchStarwarsHero = useConstant(() =>
    AwesomeDebouncePromise(searchStarwarsHero, 300)
  );

  const search = useAsync(
    async () => {
      if (inputText.length === 0) {
        return [];
      } else {
        return debouncedSearchStarwarsHero(inputText);
      }
    },
    //Ensure a new request is made everytime the text changes (even if it's debounced)
    [inputText]
  );

  //Return everything needed for the hook consumer
  return {
    inputText,
    setInputText,
    search,
  };
};

Et ensuite vous pouvez utiliser votre crochet:

const SearchStarwarsHeroExample = () => {
  const { inputText, setInputText, search } = useSearchStarwarsHero();
  return (
    <div>
      <input value={inputText} onChange={e => setInputText(e.target.value)} />
      <div>
        {search.loading && <div>...</div>}
        {search.error && <div>Error: {search.error.message}</div>}
        {search.result && (
          <div>
            <div>Results: {search.result.length}</div>
            <ul>
              {search.result.map(hero => (
                <li key={hero.name}>{hero.name}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
};

Vous trouverez cet exemple exécute ici et vous devriez lire réagir-async-crochet documentation pour plus de détails.

---

2018: essayez promesse anti-rebond

On a souvent envie de antirebond des appels API pour éviter d'inonder le backend inutile demandes.

En 2018, en travaillant avec des rappels (Lodash/Trait) se sent mal et sujettes à l'erreur pour moi. Il est facile de rencontrer des standard et des problèmes de concurrence, en raison des appels de l'API de résoudre dans un ordre arbitraire.

J'ai créé une petite bibliothèque avec de Réagir à l'esprit pour résoudre vos douleurs: génial d'anti-rebond-la promesse.

Cela ne devrait pas être plus compliqué que cela:

const searchAPI = text => fetch('/search?text=' + encodeURIComponent(text));

const searchAPIDebounced = AwesomeDebouncePromise(searchAPI, 500);

class SearchInputAndResults extends React.Component {
  state = {
    text: '',
    results: null,
  };

  handleTextChange = async text => {
    this.setState({ text, results: null });
    const result = await searchAPIDebounced(text);
    this.setState({ result });
  };
}

Le sans rebond fonction garantit que:

• Appels de l'API sera sans rebond
• le sans rebond de la fonction renvoie toujours une promesse
• seul le dernier appel est renvoyé promesse de résoudre
• un seul this.setState({ result }); va se passer par appel d'API

Par la suite, vous pouvez ajouter une autre astuce si votre composant démonte:

componentWillUnmount() {
  this.setState = () => {};
}

Noter que Observables (RxJS) peut également être un grand ajustement pour l'anti-rebond des entrées, mais il est plus puissant que l'abstraction qui peut être plus difficile à apprendre/utiliser correctement.

---

< 2017: voulez toujours utiliser de rappel anti-rebond?

L'important est ici pour créer un unique sans rebond (ou limitée) de la fonction par l'instance du composant. Vous ne voulez pas de recréer l'anti-rebond (ou papillon) de la fonction à chaque fois, et vous ne voulez pas plusieurs instances partagent les mêmes sans rebond de la fonction.

Je ne suis pas la définition d'une fonction anti-rebond dans cette réponse, car il n'est pas vraiment pertinent, mais cela fonctionne parfaitement bien avec _.debounce de soulignement ou lodash, ainsi que toute fournies par l'utilisateur fonction anti-rebond.

---

BONNE IDÉE:

Parce que sans rebond fonctions sont dynamiques, nous devons créer un sans rebond de la fonction par l'instance du composant.

ES6 (propriété de la classe): recommandé

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

ES6 (le constructeur de la classe)

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

Voir JsFiddle: 3 instances de production de 1 entrée de journal par exemple (cela fait 3 dans le monde).

---

PAS une bonne idée:

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

Ça ne marchera pas, parce que pendant la classe description de la création d'objet, this n'est pas l'objet lui-même créé. this.method ne renvoie pas à quoi vous attendre parce que le this contexte n'est pas l'objet lui-même (qui en réalité n'existe pas vraiment encore BTW que c'est juste d'être créé).

---

PAS une bonne idée:

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

Cette fois, vous êtes effectivement la création d'un sans rebond fonction qui appelle votre this.method. Le problème, c'est que vous êtes le recréer à chaque debouncedMethod appel, de sorte que le nouvellement créé fonction anti-rebond ne sait rien sur l'ancien appels! Vous devez réutiliser le même sans rebond fonction au cours du temps ou de l'anti-rebond ne se fera pas.

---

PAS une bonne idée:

var SearchBox = React.createClass({
  debouncedMethod: debounce(function () {...},100),
});

C'est un peu difficile ici.

Tous les montées des instances de la classe partagent la même sans rebond de la fonction, et le plus souvent ce n'est pas ce que vous voulez!. Voir JsFiddle: 3 instances sont producting seulement 1 entrée de journal à l'échelle mondiale.

Vous devez créer un sans rebond fonction pour chaque instance de composant, et pas un seul sans rebond de la fonction au niveau de la classe, partagée par chaque instance de composant.

---

Prendre soin de Réagir à l'événement de mise en commun

Cela est lié parce que nous voulons souvent anti-rebond ou de gaz d'événements DOM.

À Réagir, le cas des objets (c'est à dire, SyntheticEvent) que vous recevez des rappels sont mis en commun (c'est maintenant documenté). Cela signifie que, après l'événement de rappel a appelé, le SyntheticEvent que vous recevrez sera remis dans la piscine avec des attributs vides pour réduire la GC pression.

Donc, si vous avez accès SyntheticEvent propriétés de manière asynchrone à l'origine de rappel (comme cela peut être le cas si vous accélération/anti-rebond), les propriétés que vous avez accès peuvent être effacées. Si vous souhaitez que l'événement à ne jamais se remettre dans la piscine, vous pouvez utiliser le persist() méthode.

Sans persistent (comportement par défaut: l'événement)

onClick = e => {
  alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
  setTimeout(() => {
    alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
  }, 0);
};

Le 2ème (async) va imprimer hasNativeEvent=false parce que les propriétés de l'événement ont été nettoyés.

Avec persistent

onClick = e => {
  e.persist();
  alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
  setTimeout(() => {
    alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
  }, 0);
};

Le 2ème (async) va imprimer hasNativeEvent=true parce que persist vous permet d'éviter de placer l'événement dans la piscine.

Vous pouvez tester ces 2 comportements ici: JsFiddle

Lire Julen réponse pour un exemple d'utilisation de persist() avec une manette des gaz/fonction anti-rebond.

Si vous avez besoin de l'objet événement est d'obtenir le DOM élément d'entrée, la solution est beaucoup plus simple – il suffit d'utiliser ref. À noter que cela nécessite Trait de soulignement:

class Item extends React.Component {
constructor(props) {
super(props);
this.saveTitle = _.throttle(this.saveTitle.bind(this), 1000);
}
saveTitle(){
let val = this.inputTitle.value;
//make the ajax call
}
render() {
return <input 
ref={ el => this.inputTitle = el } 
type="text" 
defaultValue={this.props.title} 
onChange={this.saveTitle} />
}
}

Après avoir lutté avec le texte des entrées pour un certain temps et ne pas trouver un solution parfaite à mon propre compte, j'ai trouvé ceci sur npm: réagir-anti-rebond-entrée.

Voici un exemple simple:

import React from 'react';
import ReactDOM from 'react-dom';
import {DebounceInput} from 'react-debounce-input';
class App extends React.Component {
state = {
value: ''
};
render() {
return (
<div>
<DebounceInput
minLength={2}
debounceTimeout={300}
onChange={event => this.setState({value: event.target.value})} />
<p>Value: {this.state.value}</p>
</div>
);
}
}
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

La DebounceInput composant accepte tous les accessoires que vous pouvez affecter à une normale de l'élément d'entrée. Essayer sur codepen

J'espère que cela aide quelqu'un d'autre aussi, et leur permet de gagner du temps.

Beaucoup de bonnes infos ici déjà, mais pour être bref. Cela fonctionne pour moi...

import React, {Component} from 'react';
import _ from 'lodash';
class MyComponent extends Component{
constructor(props){
super(props);
this.handleChange = _.debounce(this.handleChange.bind(this),700);
}; 

Vous pouvez utiliser Lodash antirebond https://lodash.com/docs/4.17.5#debounce méthode. C'est simple et efficace.

import * as lodash from lodash;
const update = (input) => {
//Update the input here.
console.log(`Input ${input}`);     
}
const debounceHandleUpdate = lodash.debounce((input) => update(input), 200, {maxWait: 200});
doHandleChange() {
debounceHandleUpdate(input);
}

Vous pouvez également annuler l'anti-rebond de la méthode en utilisant la méthode ci-dessous.

this.debounceHandleUpdate.cancel();

Espère que cela vous aide. Cheers!!

Avec debounce vous avez besoin de garder l'original synthétique événement autour avec event.persist(). Voici un exemple fonctionnel testé avec React 16+.

import React, { Component } from 'react';
import debounce from 'lodash/debounce'
class ItemType extends Component {
evntHandler = debounce((e) => {
console.log(e)
}, 500);
render() {
return (
<div className="form-field-wrap"
onClick={e => {
e.persist()
this.evntHandler(e)
}}>
...
</div>
);
}
}
export default ItemType;

Avec composante fonctionnelle, vous pouvez le faire -

const Search = ({ getBooks, query }) => {
const handleOnSubmit = (e) => {
e.preventDefault();
}
const debouncedGetBooks = debounce(query => {
getBooks(query);
}, 700);
const onInputChange = e => {
debouncedGetBooks(e.target.value)
}
return (
<div className="search-books">
<Form className="search-books--form" onSubmit={handleOnSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="text" onChange={onInputChange} placeholder="Harry Potter" />
<Form.Text className="text-muted">
Search the world's most comprehensive index of full-text books.
</Form.Text>
</Form.Group>
<Button variant="primary" type="submit">
Search
</Button>
</Form>
</div>
)
}

Références -
- https://gist.github.com/elijahmanor/08fc6c8468c994c844213e4a4344a709
- https://blog.revathskumar.com/2016/02/reactjs-using-debounce-in-react-components.html

Juste une autre variante récente de réagir et de lodash.

class Filter extends Component {
static propTypes = {
text: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired
}
state = {
initialText: '',
text: ''
}
constructor (props) {
super(props)
this.setText = this.setText.bind(this)
this.onChange = _.fp.debounce(500)(this.onChange.bind(this))
}
static getDerivedStateFromProps (nextProps, prevState) {
const { text } = nextProps
if (text !== prevState.initialText) {
return { initialText: text, text }
}
return null
}
setText (text) {
this.setState({ text })
this.onChange(text)
}
onChange (text) {
this.props.onChange(text)
}
render () {
return (<input value={this.state.text} onChange={(event) => this.setText(event.target.value)} />)
}
}

Au lieu d'emballage de la handleOnChange dans un anti-rebond(), pourquoi ne pas envelopper l'appel ajax à l'intérieur de la fonction de rappel à l'intérieur de l'anti-rebond, afin de ne pas détruire l'objet d'événement. Donc quelque chose comme ceci:

handleOnChange: function (event) {
debounce(
$.ajax({})
, 250);
}

Une belle et propre solution, qui ne nécessite pas de dépendances externes:

L'anti-rebond avec Crochets Réagir

Il utilise une coutume plus la useEffect Réagir crochets et les setTimeout /clearTimeout méthode.

pour throttle ou debounce le meilleur moyen est de créer une fonction de créateur, de sorte que vous pouvez l'utiliser n'importe où, par exemple:

  updateUserProfileField(fieldName) {
const handler = throttle(value => {
console.log(fieldName, value);
}, 400);
return evt => handler(evt.target.value.trim());
}

et dans votre render méthode que vous pouvez faire:

<input onChange={this.updateUserProfileField("givenName").bind(this)}/>

la updateUserProfileField méthode permet de créer un coin de la fonction à chaque fois que vous l'appelez.

Note n'essayez pas de retourner le gestionnaire directement par exemple, cela ne fonctionnera pas:

 updateUserProfileField(fieldName) {
return evt => throttle(value => {
console.log(fieldName, value);
}, 400)(evt.target.value.trim());
}

la raison pour laquelle cela ne fonctionne pas, car cela va générer une nouvelle accélération de la fonction à chaque fois que l'événement appelé au lieu d'utiliser la même fonction de l'accélérateur, donc, fondamentalement, la puissance sera inutile 😉

Aussi, si vous utilisez debounce ou throttle vous n'avez pas besoin setTimeout ou clearTimeout, c'est pourquoi nous les utilisons 😛

un peu de retard ici, mais cela devrait vous aider.
créez cette classe(c'est écrit en caractères d'imprimerie, mais il est facile de le convertir en javascript)

export class debouncedMethod<T>{
constructor(method:T, debounceTime:number){
this._method = method;
this._debounceTime = debounceTime;
}
private _method:T;
private _timeout:number;
private _debounceTime:number;
public invoke:T = ((...args:any[])=>{
this._timeout && window.clearTimeout(this._timeout);
this._timeout = window.setTimeout(()=>{
(this._method as any)(...args);
},this._debounceTime);
}) as any;
}

et à utiliser

var foo = new debouncedMethod((name,age)=>{
console.log(name,age);
},500);
foo.invoke("john",31);

Julen solution est un peu difficile à lire, ici, est plus clair et à-le-point de réagir code pour quelqu'un qui a trébuché lui, basée sur le titre et pas les plus petits détails de la question.

tl;dr version: lorsque vous devez mettre à jour les observateurs appel envoyer un calendrier plutôt la méthode qui sera réellement informer les observateurs (ou effectuer ajax, etc)

Complète jsfiddle avec l'exemple de composant jsfiddle

var InputField = React.createClass({
getDefaultProps: function () {
return {
initialValue: '',
onChange: null
};
},
getInitialState: function () {
return {
value: this.props.initialValue
};
},
render: function () {
var state = this.state;
return (
<input type="text"
value={state.value}
onChange={this.onVolatileChange} />
);
},
onVolatileChange: function (event) {
this.setState({ 
value: event.target.value 
});
this.scheduleChange();
},
scheduleChange: _.debounce(function () {
this.onChange();
}, 250),
onChange: function () {
var props = this.props;
if (props.onChange != null) {
props.onChange.call(this, this.state.value)
}
},
});

Vous pouvez également utiliser un auto-écrit mixin, quelque chose comme ceci:

var DebounceMixin = {
debounce: function(func, time, immediate) {
var timeout = this.debouncedTimeout;
if (!timeout) {
if (immediate) func();
this.debouncedTimeout = setTimeout(function() {
if (!immediate) func();
this.debouncedTimeout = void 0;
}.bind(this), time);
}
}
};

Et ensuite l'utiliser dans votre composant comme ceci:

var MyComponent = React.createClass({
mixins: [DebounceMixin],
handleClick: function(e) {
this.debounce(function() {
this.setState({
buttonClicked: true
});
}.bind(this), 500, true);
},
render: function() {
return (
<button onClick={this.handleClick}></button>
);
}
});