Wie implementiert man Entprellen in React-Anwendungen?

Wie führe ich eine Entprellung in React durch?

React verdankt seine Popularität seiner komponentenbasierten Architektur. Oft verfügen wir über Komponenten, die auf Eingabeänderungen hören und API-Aufrufe auslösen, um Daten abzurufen. Wir möchten diese API-Aufrufe entprellen, um unnötige Anfragen zu vermeiden.

Entprellen mit React-Hooks und 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>
    </>
  );
};

In diesem Beispiel verwenden wir die Entprellungsfunktion nur zum Umschließen der fetchResults-Funktion Führen Sie den API-Aufruf nach 500 ms Inaktivität durch. Wir entprellen die Funktion bei jeder Änderung des inputText-Status. Anschließend verwenden wir Suspense, um einen Platzhalter zu rendern, während die Ergebnisse abgerufen werden.

Entprellen mit Klassenkomponenten

Obwohl React-Hooks empfohlen werden, können Sie auch Klassenkomponenten zum Entprellen verwenden:

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

Entprellen mit Event-Pooling

Bedenken Sie dieses Ereignis, wenn Sie Event-Handler in React anhängen Objekte werden gepoolt, um den GC-Druck zu reduzieren. Wenn Sie asynchron zum Handler-Aufruf auf Ereigniseigenschaften zugreifen möchten, können Sie mit der Methode e.persist() verhindern, dass das Ereignis an den Pool zurückgegeben wird:

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>

Das obige ist der detaillierte Inhalt vonWie implementiert man Entprellen in React-Anwendungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!