Entprellen mit React Hooks

Heute werde ich Ihnen zeigen, wie Sie einen useDebounce-Hook erstellen, mit dem Sie API-Aufrufe ganz einfach verschieben können, damit sie nicht zu oft auftreten.

Ich habe auch eine Demo erstellt, die unseren Hook verwendet. Es sucht nach Marvel Comics-APIs und mit dem useDebounce-Hook können Sie Serveraufrufe bei jedem Tastendruck vermeiden.

Ziemlich elegant, oder? Ok, jetzt kommen wir zum Code!

, , . , , , . useEffect, , . useState useEffect, .

import React, { useState, useEffect } from 'react';
import useDebounce from './use-debounce';

// 
function App() {
  //       
  const [searchTerm, setSearchTerm] = useState('');
  //       
  const [results, setResults] = useState([]);
  //     (    API)
  const [isSearching, setIsSearching] = useState(false);

  //     ,    searchTerm.
  //      (  ) ...
  // ...    500ms   .
  //      searchTerm.
  //   ,      ,    
  //           .
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  //    
  //   useEffect,     
  useEffect(
    () => {
      //       (  -)
      if (debouncedSearchTerm) {
        //   isSearching
        setIsSearching(true);
        //    
        searchCharacters(debouncedSearchTerm).then(results => {
          //    false, -  
          setIsSearching(false);
          //    
          setResults(results);
        });
      } else {
        setResults([]);
      }
    },
    //    useEffect
    //  useEffect       ...
    // ...    ,      ...
    //   searchTerm     500ms.
    [debouncedSearchTerm]
  );

  //   UI     
  return (
    <div>
      <input
        placeholder="Search Marvel Comics"
        onChange={e => setSearchTerm(e.target.value)}
      />

      {isSearching && <div>Searching ...</div>}

      {results.map(result => (
        <div key={result.id}>
          <h4>{result.title}</h4>
          <img
            src={`${result.thumbnail.path}/portrait_incredible.${
              result.thumbnail.extension
            }`}
          />
        </div>
      ))}
    </div>
  );
}

//    
function searchCharacters(search) {
  const apiKey = 'f9dfb1e8d466d36c27850bedd2047687';
  const queryString `apikey=${apiKey}&titleStartsWith=${search}`;
  return fetch(
    `https://gateway.marvel.com/v1/public/comics?${queryString}`,
    {
      method: 'GET'
    }
  )
    .then(r => r.json())
    .then(r => r.data.results)
    .catch(error => {
      console.error(error);
      return [];
    });
}

, ! , .

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

//  
export default function useDebounce(value, delay) {
  //      
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      //  debouncedValue  value ( ) 
      //   
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      //   ,     ,  ...
      // ... useEffect  . useEffect   ,   ...
      // ... value   (   ).
      //     debouncedValue,   value ...
      // ...     .
      //     .
      //     :    -  ...
      // ...     ,   ,  debouncedValue...
      // ...     ,      ,  500ms.
      return () => {
        clearTimeout(handler);
      };
    },
    //  ,    
    //       "delay"    ...
    // ...      .
    [value]
  );

  return debouncedValue;
}

Und hier ist er vor dir! Wir haben jetzt einen Haken für zurückgestellte Werte, mit dem wir die Änderung eines Wertes direkt im Körper unserer Komponente verzögern können. Der zurückgestellte Wert kann dann anstelle der veränderlichen Werte selbst zum Abhängigkeitsarray useEffect hinzugefügt werden, um die Häufigkeit von Aufrufen auf den gewünschten Effekt zu begrenzen.

Hier ist die Demo-Demo von Marvel Comic Search auf CodeSandbox.

Wenn es Ihnen gefallen hat, können Sie meinen Blog über React Hooks und den React App Builder lesen und bewerten .