Neperkraukite serverio nereikalingais paieškos funkcijos iškvietimais ir optimizuokite programos našumą naudodami šią techniką.

„React“ diegiant paieškos funkciją „onChange“ tvarkytojas iškviečia paieškos funkciją kiekvieną kartą, kai vartotojas įveda tekstą įvesties laukelyje. Šis metodas gali sukelti našumo problemų, ypač jei skambinate API arba pateikiate duomenų bazės užklausas. Dažni paieškos funkcijos iškvietimai gali perkrauti žiniatinklio serverį ir sukelti strigčių arba nereaguoti UI. Atsikratymas išsprendžia šią problemą.

Kas yra atšokimas?

Paprastai „React“ paieškos funkciją įgyvendinate iškviesdami „onChange“ tvarkyklės funkciją kiekvieną kartą paspaudę klavišą, kaip parodyta toliau:

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..."
 />
 );
}
instagram viewer

Nors tai veikia, skambutis į užpakalinę programą atnaujinti paieškos rezultatus kiekvieną kartą paspaudus klavišą gali būti brangus. Pavyzdžiui, jei ieškote „webdev“, programa išsiųs užklausą į užklausą su reikšmėmis „w“, „mes“, „web“ ir pan.

Debouncing yra metodas, kuris veikia uždelsdamas funkcijos vykdymą, kol pasibaigs delsos laikotarpis. Debounce funkcija aptinka kiekvieną kartą, kai vartotojas įveda tekstą, ir neleidžia skambinti paieškos tvarkytojui, kol nepraeina delsa. Jei vartotojas ir toliau rašo per delsos laikotarpį, laikmatis nustatomas iš naujo, o „React“ vėl iškviečia funkciją naujam delsos laikui. Šis procesas tęsiasi tol, kol vartotojas pristabdo rašymą.

Laukiant, kol vartotojai pristabdys spausdinimą, atšaukimas užtikrina, kad jūsų programa atlieka tik būtinas paieškos užklausas ir taip sumažina serverio apkrovą.

Kaip atšaukti paiešką „React“.

Yra keletas bibliotekų, kurias galite naudoti debounce įgyvendinimui. Taip pat galite pasirinkti įdiegti jį patys nuo nulio naudodami „JavaScript“. setTimeout ir clearTimeout funkcijas.

Šiame straipsnyje naudojama debounce funkcija iš Lodašo biblioteka.

Darant prielaidą, kad turite paruoštą „React“ projektą, sukurkite naują komponentą, vadinamą Paieška. Jei neturite veikiančio projekto, sukurkite programą „React“ naudodami sukurti „React“ programos įrankį.

Viduje Paieška komponento failą, nukopijuokite šį kodą, kad sukurtumėte paieškos įvesties laukelį, kuris kiekvieną kartą paspaudus klavišą iškviečia tvarkyklės funkciją.

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

Norėdami atsikratyti rankenaPaieška funkciją, perduokite ją į atšokti funkcija iš lodash.

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

Viduje atšokti funkciją, perduodate funkciją, kurią norite atidėti, t. y rankenaPaieška funkcija ir delsos laikas milisekundėmis, ty 500 ms.

Nors aukščiau pateiktas kodas turėtų atidėti skambutį į rankenaPaieška užklausą, kol vartotojas pristabdys rašymą, jis neveikia React. Kitame skyriuje paaiškinsime kodėl.

Atšokimas ir perteikimas

Ši programa naudoja valdomą įvestį. Tai reiškia, kad būsenos reikšmė kontroliuoja įvesties vertę; kiekvieną kartą, kai vartotojas įveda paieškos laukelį, React atnaujina būseną.

React, kai pasikeičia būsenos reikšmė, React perteikia komponentą ir vykdo visas jame esančias funkcijas.

Aukščiau pateiktame paieškos komponente, kai komponentas atvaizduojamas iš naujo, „React“ vykdo debounce funkciją. Funkcija sukuria naują laikmatį, kuris seka delsą, o senasis laikmatis sėdi atmintyje. Pasibaigus laikui, jis suaktyvina paieškos funkciją. Tai reiškia, kad paieškos funkcija niekada neatšaukiama, ji vėluojama 500 ms. Šis ciklas kartojasi kiekvieną kartą – funkcija sukuria naują laikmatį, senojo laikmačio galiojimas baigiasi ir tada iškviečia paieškos funkciją

Kad debounce funkcija veiktų, turite ją iškviesti tik vieną kartą. Tai galite padaryti iškvietę debounce funkciją už komponento ribų arba pagal naudojant atmintinės techniką. Tokiu būdu, net jei komponentas atvaizduojamas iš naujo, „React“ jo nebevykdys.

Debounce funkcijos apibrėžimas už paieškos komponento ribų

Perkelkite atšokti funkcija už jos ribų Paieška komponentas, kaip parodyta žemiau:

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


const debouncedSearch = debounce(handleSearch, 500);

Dabar, į Paieška komponentas, skambinkite debouncedSearch ir įveskite paieškos terminą.

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

Paieškos funkcija bus iškviesta tik pasibaigus delsos laikotarpiui.

Debounce funkcijos įsiminimas

Atmintis reiškia funkcijos rezultatų saugojimą talpykloje ir pakartotinį jų naudojimą, kai iškviečiate funkciją tais pačiais argumentais.

Norėdami įsiminti atšokti funkciją, naudokite naudokiteMemo kabliukas.

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

Atminkite, kad taip pat suvyniojote rankenaPaieška funkcija a naudokite atgalinį skambutį kablys, kad įsitikintumėte, jog React skambina tik vieną kartą. Be naudokite atgalinį skambutį kablys, „React“ vykdytų rankenaPaieška funkcija su kiekvienu pakartotiniu atvaizdavimu, sukuriančiu priklausomybes naudokiteMemo kablio keitimas, kuris savo ruožtu vadintų atšokti funkcija.

Dabar „React“ skambins tik atšokti funkcija, jei rankenaPaieška funkcija arba delsos laikas pasikeičia.

Optimizuokite paiešką naudodami „Debounce“.

Kartais lėtėjimas gali būti geresnis našumui. Atliekant paieškos užduotis, ypač naudojant brangius duomenų bazių ar API iškvietimus, reikia naudoti debounce funkciją. Ši funkcija įveda delsą prieš siunčiant užklausas.

Tai padeda sumažinti serveriui teikiamų užklausų skaičių, nes užklausą siunčia tik praėjus delsai ir vartotojui pristabdžius teksto rašymą. Tokiu būdu serveris neperkraunamas per daug užklausų, o našumas išlieka efektyvus.