Verringern der Serverlast durch Verwendung der Entprell-/Drosseltechnik in ReactJS

Entprellen und Drosseln in React.js

Entprellen und Drosseln sind Techniken zur Leistungsoptimierung durch Steuerung der Häufigkeit der Funktionsausführung als Reaktion auf häufige Ereignisse (z. B. Tippen, Scrollen, Größenänderung).

---

1. Was ist Entprellen?

Entprellen verzögert die Ausführung einer Funktion, bis eine bestimmte Zeit seit ihrem letzten Aufruf vergangen ist.

Anwendungsfallbeispiel:

• Sucheingabefeld: Vermeiden Sie, bei jedem Tastendruck einen API-Aufruf auszulösen.

Beispiel zum Entprellen in 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. Was ist Drosselung?

Drosselung stellt sicher, dass eine Funktion höchstens einmal in einem bestimmten Zeitintervall ausgeführt wird, unabhängig davon, wie oft sie in diesem Intervall ausgelöst wird.

Anwendungsfallbeispiel:

• Scroll-Ereignis: Begrenzen Sie die Häufigkeit, mit der eine Funktion während eines Scroll-Ereignisses ausgelöst wird, um die Leistung zu verbessern.

Drosselungsbeispiel in 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

Verwendung:

import { debounce, throttle } from 'lodash';

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

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

Reagieren-Nutzung

Installieren:

npm install react-use

Verwendung:

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;

---

Hauptunterschiede

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.

Funktion

---

Entprellen

Drosselung Ausführung

Wird einmal ausgeführt, nachdem der Benutzer für eine bestimmte Zeit mit dem Auslösen von Ereignissen aufgehört hat. Wird während des Ereignisses in regelmäßigen Abständen ausgeführt.

Anwendungsfälle

Sucheingabe, Größenänderung, Formularvalidierung. Scroll-Ereignisse, Schaltflächenklicks, API-Abfragen. Leistung Reduziert die Anzahl der Funktionsaufrufe. Begrenzt die Ausführung auf einmal pro Intervall.

Wann zu verwenden ist