Bagaimana untuk Melaksanakan Debouncing dalam Aplikasi React?

Bagaimanakah cara saya melakukan nyahpantun dalam React?

React berhutang popularitinya kepada seni bina berasaskan komponennya. Selalunya, kami mempunyai komponen yang mendengar perubahan input dan mencetuskan panggilan API untuk mendapatkan semula data. Kami ingin menyahlantunkan panggilan API ini untuk mengelak daripada membuat permintaan yang tidak perlu.

menyahlantun dengan cangkuk React dan 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>
    </>
  );
};

Dalam contoh ini, kami menggunakan fungsi nyahlantun untuk membalut fungsi fetchResults dan hanya buat panggilan API selepas 500ms tidak aktif. Kami menyahlantunkan fungsi pada setiap perubahan keadaan inputText. Kami kemudian menggunakan Suspense untuk memaparkan pemegang tempat semasa keputusan sedang diambil.

Nyahlantun dengan komponen kelas

Walaupun cangkuk React digalakkan, anda juga boleh menggunakan komponen kelas untuk nyahlantun:

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

Debounce dengan pengumpulan acara

Apabila melampirkan pengendali acara dalam React, ingat bahawa objek peristiwa dikumpulkan untuk mengurangkan tekanan GC. Jika anda ingin mengakses sifat acara secara tidak segerak kepada panggilan pengendali, anda boleh menggunakan kaedah e.persist() untuk menghalang acara daripada dikembalikan ke kumpulan:

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>

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Debouncing dalam Aplikasi React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!