Comment implémenter l'anti-rebond dans les applications React ?

Comment puis-je anti-rebond dans React ?

React doit sa popularité à son architecture basée sur des composants. Souvent, nous avons des composants qui écoutent les modifications d’entrée et déclenchent des appels d’API pour récupérer des données. Nous voulons anti-rebondir ces appels d'API pour éviter de faire des requêtes inutiles.

anti-rebond avec les hooks React et Suspense

import React, { useState, useEffect, Suspense } from 'react';

const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

const SearchBox = () => {
  const [inputText, setInputText] = useState('');
  const [searchResults, setSearchResults] = useState(null);

  const fetchResults = async (text) => {
    const response = await fetch(`/search?text=${text}`);
    const data = await response.json();
    setSearchResults(data);
  };

  const debouncedFetchResults = debounce(fetchResults, 500);

  useEffect(() => {
    if (!inputText) {
      return;
    }
    debouncedFetchResults(inputText);
  }, [inputText, debouncedFetchResults]);

  return (
    <>
      <input type="search" value={inputText} onChange={(e) => setInputText(e.target.value)} />
      <Suspense fallback={<div>Loading...</div>}>
        {searchResults && <Results results={searchResults} />}
      </Suspense>
    </>
  );
};

Dans cet exemple, nous utilisons la fonction anti-rebond pour envelopper la fonction fetchResults et uniquement effectuez l'appel API après 500 ms d'inactivité. Nous anti-rebondissons la fonction à chaque changement de l'état inputText. Nous utilisons ensuite Suspense pour afficher un espace réservé pendant la récupération des résultats.

Anti-rebond avec des composants de classe

Bien que les hooks React soient encouragés, vous pouvez également utiliser des composants de classe pour anti-rebond :

import React, { Component } from 'react';

const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

class SearchBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: '',
      searchResults: null
    };
    this.debouncedFetchResults = debounce(this.fetchResults, 500);
  }

  fetchResults = async (text) => {
    const response = await fetch(`/search?text=${text}`);
    const data = await response.json();
    this.setState({ searchResults: data });
  };

  handleInputChange = (e) => {
    const text = e.target.value;
    this.setState({ inputText: text });
    this.debouncedFetchResults(text);
  };

  render() {
    return (
      <>
        <input type="search" value={this.state.inputText} onChange={this.handleInputChange} />
        {this.state.searchResults && <Results results={this.state.searchResults} />}
      </>
    );
  }
}

Anti-rebond avec le pooling d'événements

Lorsque vous attachez des gestionnaires d'événements dans React, n'oubliez pas que les objets d'événement sont regroupés pour réduire la pression du GC. Si vous souhaitez accéder aux propriétés de l'événement de manière asynchrone à l'appel du gestionnaire, vous pouvez utiliser la méthode e.persist() pour empêcher l'événement d'être renvoyé au pool :

const onClick = (e) => {
  e.persist(); // Prevent the event object from being returned to the pool
  setTimeout(() => {
    // Access event properties here
  }, 0);
};

<button onClick={onClick}>Click Me</button>

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!