React 애플리케이션에서 디바운싱을 구현하는 방법은 무엇입니까?

React에서 디바운스를 어떻게 수행하나요?

React의 인기는 컴포넌트 기반 아키텍처 덕분입니다. 입력 변경 사항을 수신하고 API 호출을 트리거하여 데이터를 검색하는 구성 요소가 있는 경우가 많습니다. 불필요한 요청을 피하기 위해 이러한 API 호출을 디바운스하고 싶습니다.

React 후크 및 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>
    </>
  );
};

이 예에서는 디바운스 함수를 사용하여 fetchResults 함수를 래핑하고 500ms 동안 활동이 없으면 API 호출을 수행합니다. inputText 상태가 변경될 때마다 함수를 디바운싱합니다. 그런 다음 결과를 가져오는 동안 Suspense를 사용하여 자리 표시자를 렌더링합니다.

클래스 구성 요소로 디바운스

React 후크가 권장되지만 클래스 구성 요소를 사용하여 디바운스할 수도 있습니다.

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

이벤트 풀링으로 디바운스

React에 이벤트 핸들러를 연결할 때 다음 사항을 기억하세요. GC 압력을 줄이기 위해 이벤트 개체가 풀링됩니다. 핸들러 호출에 대해 비동기적으로 이벤트 속성에 액세스하려는 경우 e.persist() 메서드를 사용하여 이벤트가 풀로 반환되는 것을 방지할 수 있습니다.

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>

위 내용은 React 애플리케이션에서 디바운싱을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!