Kā uzlabot meklēšanas veiktspēju, reaģējot ar atkāpšanos

Programmā React, ieviešot meklēšanas funkcionalitāti, onChange apdarinātājs izsauc meklēšanas funkciju ikreiz, kad lietotājs ieraksta ievades lodziņā. Šī pieeja var izraisīt veiktspējas problēmas, īpaši, ja veicat API izsaukumus vai vaicājumu datubāzē. Bieža meklēšanas funkcijas izsaukšana var pārslogot tīmekļa serveri, izraisot avārijas vai nereaģējošo lietotāja interfeisu. Atkāpšanās atrisina šo problēmu.

Kas ir atkāpšanās?

Parasti jūs ieviešat meklēšanas funkcionalitāti programmā React, izsaucot onChange apdarinātāja funkciju katrā taustiņsitienā, kā parādīts tālāk:

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

Kamēr tas darbojas, zvans uz aizmugursistēmu, lai atjauninātu meklēšanas rezultātus, katru reizi nospiežot taustiņu, var kļūt dārgs. Piemēram, ja jūs meklējat “webdev”, lietojumprogramma aizmugursistēmai nosūtīs pieprasījumu ar vērtībām “w”, “we”, “web” un tā tālāk.

Atkāpšanās ir paņēmiens, kas darbojas, aizkavējot funkcijas izpildi, līdz ir pagājis aizkaves periods. Atkāpšanās funkcija nosaka katru reizi, kad lietotājs ieraksta un neļauj zvanīt meklēšanas apstrādātājam, līdz ir pagājis aizkave. Ja lietotājs turpina rakstīt aizkaves periodā, taimeris tiek atiestatīts un React vēlreiz izsauc funkciju jaunajai aizkavei. Šis process turpinās, līdz lietotājs pārtrauc rakstīšanu.

Gaidot, līdz lietotāji apturēs rakstīšanu, atspēriens nodrošina, ka jūsu lietojumprogramma veic tikai nepieciešamos meklēšanas pieprasījumus, tādējādi samazinot servera slodzi.

Kā atspēkot meklēšanu programmā React

Ir vairākas bibliotēkas, kuras varat izmantot, lai ieviestu atkāpšanos. Varat arī izvēlēties to ieviest pats no nulles, izmantojot JavaScript setTimeout un clearTimeout funkcijas.

Šajā rakstā tiek izmantota debounce funkcija no lodašas bibliotēka.

Pieņemot, ka jums ir gatavs React projekts, izveidojiet jaunu komponentu ar nosaukumu Meklēt. Ja jums nav darba projekta, izveidojiet React lietotni, izmantojot izveidot React lietotnes utilītu.

Iekš Meklēt komponenta failu, kopējiet tālāk norādīto kodu, lai izveidotu meklēšanas ievades lodziņu, kas izsauc apdarinātāja funkciju katrā taustiņsitienā.

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

Lai atspēkotu rokturisMeklēšana funkciju, nododiet to uz atkāpties funkcija no 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..."
 />
 );
}

Iekš atkāpties funkciju, jūs nododat funkciju, kuru vēlaties aizkavēt, t.i., rokturisMeklēšana funkciju un aizkaves laiku milisekundēs, t.i., 500 ms.

Lai gan iepriekš norādītajam kodam vajadzētu aizkavēt zvanu uz rokturisMeklēšana pieprasījumu, līdz lietotājs pārtrauc rakstīšanu, tas nedarbojas React. Nākamajā sadaļā mēs paskaidrosim, kāpēc.

Atkāpšanās un atkārtota renderēšana

Šī lietojumprogramma izmanto kontrolētu ievadi. Tas nozīmē, ka stāvokļa vērtība kontrolē ievades vērtību; katru reizi, kad lietotājs ieraksta meklēšanas laukā React atjaunina stāvokli.

React, kad mainās stāvokļa vērtība, React pārveido komponentu un izpilda visas tajā esošās funkcijas.

Iepriekš minētajā meklēšanas komponentā, kad komponents tiek atkārtoti renderēts, React izpilda atkāpšanās funkciju. Funkcija izveido jaunu taimeri, kas seko aizkavei, un vecais taimeris paliek atmiņā. Kad laiks beidzas, tas aktivizē meklēšanas funkciju. Tas nozīmē, ka meklēšanas funkcija nekad netiek atspēkota, tā tiek aizkavēta par 500 ms. Šis cikls atkārtojas katrā renderēšanas reizē — funkcija izveido jaunu taimeri, vecais taimeris beidzas un pēc tam izsauc meklēšanas funkciju

Lai debounce funkcija darbotos, tā ir jāizsauc tikai vienu reizi. To var izdarīt, izsaucot debounce funkciju ārpus komponenta vai izmantojot izmantojot memoizācijas tehniku. Tādā veidā, pat ja komponents tiek atkārtoti renderēts, React to vairs neizpildīs.

Atkāpšanās funkcijas definēšana ārpus meklēšanas komponenta

Pārvietojiet atkāpties funkcija ārpus Meklēt komponents, kā parādīts zemāk:

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

Tagad, sadaļā Meklēt komponents, zvaniet debouncedSearch un ievadiet meklēšanas vienumu.

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

Meklēšanas funkcija tiks izsaukta tikai pēc aizkaves perioda beigām.

Atgādināšanas funkcijas iegaumēšana

Iecerēšana attiecas uz funkcijas rezultātu saglabāšanu kešatmiņā un to atkārtotu izmantošanu, kad izsaucat funkciju ar tiem pašiem argumentiem.

Lai iegaumētu atkāpties funkciju, izmantojiet izmantotMemo āķis.

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

Ņemiet vērā, ka esat arī iesaiņojis rokturisMeklēšana funkcija a izmantojiet Atzvanu āķis, lai nodrošinātu, ka React to izsauc tikai vienu reizi. Bez izmantojiet Atzvanu āķis, React izpildītu rokturisMeklēšana funkcija ar katru atkārtotu renderēšanu, veidojot atkarības no izmantotMemo āķa maiņa, kas savukārt izsauktu atkāpties funkciju.

Tagad React zvanīs tikai uz atkāpties funkcija, ja rokturisMeklēšana funkcija vai aizkaves laiks mainās.

Optimizējiet meklēšanu, izmantojot Debounce

Dažreiz palēnināšana var būt labāka veiktspējai. Veicot meklēšanas uzdevumus, īpaši ar dārgiem datubāzes vai API izsaukumiem, ieteicams izmantot debounce funkciju. Šī funkcija ievieš aizkavi pirms aizmugursistēmas pieprasījumu nosūtīšanas.

Tas palīdz samazināt serverim nosūtīto pieprasījumu skaitu, jo tas nosūta pieprasījumu tikai pēc tam, kad ir pagājis aizkave un lietotājs ir apturējis rakstīšanu. Tādā veidā serveris netiek pārslogots ar pārāk daudziem pieprasījumiem, un veiktspēja saglabājas efektīva.