Diminution de la charge du serveur en utilisant la technique anti-rebond/accélérateur dans Reactjs

Anti-rebond et limitation dans React.js

L'anti-rebond et la limitation sont des techniques utilisées pour optimiser les performances en contrôlant la fréquence d'exécution des fonctions en réponse à des événements fréquents (par exemple, saisie, défilement, redimensionnement).

---

1. Qu’est-ce que l’anti-rebond ?

L'anti-rebond retarde l'exécution d'une fonction jusqu'à ce qu'un certain laps de temps se soit écoulé depuis la dernière fois qu'elle a été invoquée.

Exemple de cas d'utilisation :

• Champ de saisie de recherche : évitez de déclencher un appel API à chaque frappe.

Exemple anti-rebond dans React

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

const DebouncedSearch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedValue, setDebouncedValue] = useState('');

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(searchTerm);
    }, 500); // Delay of 500ms

    return () => {
      clearTimeout(handler); // Cleanup on input change
    };
  }, [searchTerm]);

  useEffect(() => {
    if (debouncedValue) {
      console.log('API Call with:', debouncedValue);
      // Make API call here
    }
  }, [debouncedValue]);

  return (
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
};

export default DebouncedSearch;

---

2. Qu’est-ce que la limitation ?

La limitation garantit qu'une fonction est exécutée au plus une fois dans un intervalle de temps spécifié, quel que soit le nombre de fois où elle est déclenchée pendant cet intervalle.

Exemple de cas d'utilisation :

• Événement de défilement : Limitez la fréquence d'une fonction déclenchée lors d'un événement de défilement pour améliorer les performances.

Exemple de limitation dans React

import React, { useEffect } from 'react';

const ThrottledScroll = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scroll event fired');
    }, 1000); // Execute at most once every 1000ms

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <div>




<hr>

<h3>
  
  
  <strong>3. Using Libraries (Optional)</strong>
</h3>

<p>Instead of implementing custom debounce/throttle, you can use popular libraries like:</p>

<h4>
  
  
  <strong>Lodash</strong>
</h4>

<p>Install:<br>
</p>

<pre class="brush:php;toolbar:false">npm install lodash

Utilisation :

import { debounce, throttle } from 'lodash';

// Debounce Example
const debouncedFunc = debounce(() => console.log('Debounced!'), 500);

// Throttle Example
const throttledFunc = throttle(() => console.log('Throttled!'), 1000);

Réagir-utiliser

Installer :

npm install react-use

Utilisation :

import { useDebounce, useThrottle } from 'react-use';

const Demo = () => {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
  const throttledValue = useThrottle(value, 1000);

  useEffect(() => {
    console.log('Debounced:', debouncedValue);
    console.log('Throttled:', throttledValue);
  }, [debouncedValue, throttledValue]);

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type something..."
    />
  );
};

export default Demo;

---

Différences clés

Feature	Debouncing	Throttling
Execution	Executes once after the user stops firing events for a specified time.	Executes at regular intervals during the event.
Use Cases	Search input, resizing, form validation.	Scroll events, button clicks, API polling.
Performance	Reduces the number of function calls.	Limits execution to once per interval.

Fonctionnalité

---

Anti-rebond

Limitation ête> Exécution

S'exécute une fois après que l'utilisateur arrête de déclencher des événements pendant une durée spécifiée. S'exécute à intervalles réguliers pendant l'événement.

Cas d'utilisation

Saisie de recherche, redimensionnement, validation de formulaire. Défilement des événements, clics sur les boutons, interrogation de l'API. Performances Réduit le nombre d'appels de fonctions. Limitation de l'exécution à une fois par intervalle.

Quand utiliser

Anti-rebond : lorsque vous souhaitez retarder l'exécution jusqu'à ce que l'utilisateur arrête une action (par exemple, en attendant la fin de la saisie). Limitation : lorsque vous souhaitez contrôler le taux d'exécution (par exemple, garantir des performances de défilement fluides). Les deux techniques peuvent améliorer considérablement les performances et l'expérience utilisateur lorsqu'elles sont utilisées de manière appropriée !

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!