Kuidas parandada otsingu toimivust tagasilöögiga reageerimisel

Reactis kutsub onChange'i töötleja otsingufunktsiooni juurutamisel otsingufunktsiooni iga kord, kui kasutaja sisestab sisestuskasti. Selline lähenemine võib põhjustada jõudlusprobleeme, eriti API-kõnede tegemisel või andmebaasi päringute tegemisel. Otsingufunktsiooni sagedased kõned võivad veebiserverit üle koormata, mis võib põhjustada krahhi või kasutajaliidese mittereageerimist. Tagasipöördumine lahendab selle probleemi.

Mis on tagasilöömine?

Tavaliselt rakendate otsingufunktsiooni rakenduses React, kutsudes iga klahvivajutuse korral välja käitleja funktsiooni onChange, nagu allpool näidatud.

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Kuigi see töötab, võib iga klahvivajutuse korral otsingutulemuste värskendamiseks helistamine taustaprogrammile kalliks minna. Näiteks kui otsite sõna "webdev", saadaks rakendus taustaprogrammile päringu väärtustega "w", "we", "web" ja nii edasi.

Tagasipöördumine on tehnika, mis töötab funktsiooni täitmist edasi lükates, kuni viivitusperiood on möödas. Debounce funktsioon tuvastab iga kord, kui kasutaja tippib ja takistab otsingutöötlejale helistamist, kuni viivitus on möödas. Kui kasutaja jätkab viivitusperioodi jooksul tippimist, lähtestatakse taimer ja React kutsub funktsiooni uuesti välja uue viivituse saamiseks. See protsess jätkub seni, kuni kasutaja peatab tippimise.

Oodates, kuni kasutajad peatavad tippimise, tagab tagasipöördumine, et teie rakendus teeb ainult vajalikud otsingupäringud, vähendades seeläbi serveri koormust.

Kuidas otsingut Reactis tagasi lükata

Debounce'i rakendamiseks saate kasutada mitut teeki. Samuti saate selle JavaScripti abil nullist ise juurutada setTimeout ja clearTimeout funktsioonid.

See artikkel kasutab debounce funktsiooni alates lodashi raamatukogu.

Eeldades, et teil on Reacti projekt valmis, looge uus komponent nimega Otsing. Kui teil pole töötavat projekti, looge rakendus React, kasutades Looge rakenduse React utiliit.

Aastal Otsing komponendi faili, kopeerige järgmine kood, et luua otsingu sisestuskast, mis kutsub iga klahvivajutuse korral töötleja funktsiooni.

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Et põrgatada käepideOtsing funktsioon, edastage see põrgatama funktsioon lodashist.

import debounce from"lodash.debounce";
import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const debouncedSearch = debounce(handleSearch, 1000);
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Aastal põrgatama funktsiooni, sisestate funktsiooni, mida soovite edasi lükata, st käepideOtsing funktsioon ja viiteaeg millisekundites, st 500 ms.

Kuigi ülaltoodud kood peaks viivitama kõne numbrile käepideOtsing kuni kasutaja peatab tippimise, siis see Reactis ei tööta. Selgitame järgmises jaotises, miks.

Tagastamine ja uuesti renderdamine

See rakendus kasutab kontrollitud sisendit. See tähendab, et oleku väärtus kontrollib sisendi väärtust; iga kord, kui kasutaja sisestab otsinguväljale React, värskendab olekut.

Reactis, kui oleku väärtus muutub, renderdab React komponendi uuesti ja täidab kõik selle sees olevad funktsioonid.

Ülaltoodud otsingukomponendis käivitab React komponendi uuesti renderdamisel tagasilöögifunktsiooni. Funktsioon loob uue taimeri, mis jälgib viivitust ja vana taimer istub mällu. Kui aeg läbi saab, käivitab see otsingufunktsiooni. See tähendab, et otsingufunktsiooni ei tühistata kunagi, see viibib 500 ms võrra. See tsükkel kordub igal renderdamisel – funktsioon loob uue taimeri, vana taimer aegub ja seejärel kutsub välja otsingufunktsiooni

Debounce funktsiooni toimimiseks peate seda kutsuma ainult üks kord. Seda saate teha, kutsudes välja debounce funktsiooni väljaspool komponenti või kasutades kasutades memoiseerimistehnikat. Sel juhul ei käivita React seda uuesti, isegi kui komponent uuesti renderdab.

Debounce funktsiooni määratlemine väljaspool otsingukomponenti

Liigutage põrgatama funktsioon väljaspool Otsing komponent nagu allpool näidatud:

import debounce from"lodash.debounce"
const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);

Nüüd, Otsing komponent, helista debouncedSearch ja sisestage otsingusõna.

exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch(searchTerm);
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Otsingufunktsioon kutsutakse välja alles pärast viivitusperioodi möödumist.

Debounce funktsiooni meeldejätmine

Mällu salvestamine viitab funktsiooni tulemuste vahemällu salvestamisele ja nende taaskasutamisele funktsiooni kutsumisel samade argumentidega.

Et meelde jätta põrgatama funktsiooni, kasutage kasutaMemot konks.

import debounce from"lodash.debounce";
import { useCallback, useMemo, useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = useCallback((searchTerm) => {
console.log("Search for:", searchTerm);
 }, []);
const debouncedSearch = useMemo(() => {
return debounce(handleSearch, 500);
 }, [handleSearch]);
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch(searchTerm);
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Pange tähele, et olete ka pakkinud käepideOtsing funktsioon a kasutage tagasihelistamist konks tagamaks, et React helistab sellele ainult üks kord. Ilma kasutage tagasihelistamist konks, React teostaks käepideOtsing funktsioon iga kordusrenderdusega, mis loob sõltuvusi kasutaMemot konksuvahetus, mis omakorda kutsuks põrgatama funktsiooni.

Nüüd helistab React ainult põrgatama funktsioon, kui käepideOtsing funktsioon või viiteaeg muutub.

Optimeerige otsingut Debounce'iga

Mõnikord võib aeglustamine jõudluse parandamiseks olla parem. Otsinguülesannete käsitlemisel, eriti kallite andmebaasi- või API-kutsete puhul, on õige tee kasutada debounce funktsiooni. See funktsioon lisab viivituse enne taustapäringute saatmist.

See aitab vähendada serverile tehtavate päringute arvu, kuna saadab päringu alles pärast viivituse möödumist ja kasutaja on peatanud tippimise. Nii ei koormata server liiga paljude päringutega ja jõudlus jääb tõhusaks.