כיצד לשפר את ביצועי החיפוש ב-React With Debouncing

ב-React, בעת יישום פונקציונליות החיפוש, המטפל ב-onChange קורא לפונקציית החיפוש בכל פעם שהמשתמש מקליד בתוך תיבת הקלט. גישה זו עלולה לגרום לבעיות ביצועים, במיוחד אם מבצעים קריאות API או שאילתות במסד הנתונים. שיחות תכופות לפונקציית החיפוש עלולות להעמיס יתר על המידה על שרת האינטרנט, ולהוביל לקריסות או לממשק משתמש לא מגיב. יציאה מהקפצה פותרת בעיה זו.

מה זה Debouncen?

בדרך כלל, אתה מיישם את פונקציונליות החיפוש ב-React על ידי קריאה לפונקציית onChange מטפל בכל הקשה על המקשים כפי שמוצג להלן:

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

אמנם זה עובד, אבל הקריאה לקצה העורפי לעדכן תוצאות חיפוש בכל לחיצה על מקש עלולה להיות יקרה. לדוגמה, אם חיפשת "webdev", האפליקציה תשלח בקשה ל-backend עם הערכים "w", "we", "web" וכן הלאה.

Debouncing היא טכניקה הפועלת על ידי עיכוב ביצוע של פונקציה עד לחלוף תקופת השהיה. פונקציית ה-debounce מזהה כל פעם שהמשתמש מקליד ומונעת את הקריאה למטפל החיפוש עד לחלוף העיכוב. אם המשתמש ממשיך להקליד בתוך תקופת ההשהיה, הטיימר מאופס וראקט קורא לפונקציה שוב עבור ההשהיה החדשה. תהליך זה נמשך עד שהמשתמש מפסיק את ההקלדה.

על ידי המתנה למשתמשים להשהות את ההקלדה, ביטול החזרה מבטיח שהאפליקציה שלך מבצעת רק את בקשות החיפוש הדרושות ובכך מפחיתה את עומס השרת.

כיצד לבטל את החיפוש ב-React

ישנן מספר ספריות שבהן אתה יכול להשתמש כדי ליישם ביטול יציאה. אתה יכול גם לבחור ליישם את זה בעצמך מאפס באמצעות JavaScript setTimeout ו clearTimeout פונקציות.

מאמר זה משתמש בפונקציית debounce from ספריית lodash.

בהנחה שיש לך פרויקט React מוכן, צור רכיב חדש בשם לחפש. אם אין לך פרויקט עובד, צור אפליקציית React באמצעות צור את כלי השירות לאפליקציית React.

בתוך ה לחפש קובץ רכיב, העתק את הקוד הבא כדי ליצור תיבת קלט חיפוש הקוראת לפונקציית מטפל בכל הקשה.

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

כדי להקפיץ את handleSearch פונקציה, העבר אותה ל- להתנתק פונקציה מ- 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..."
 />
 );
}

בתוך ה להתנתק פונקציה, אתה מעביר את הפונקציה שאתה רוצה לעכב, כלומר את handleSearch פונקציה, וזמן ההשהיה באלפיות שניות, כלומר 500ms.

אמנם הקוד לעיל אמור לעכב את השיחה ל- handleSearch בקש עד שהמשתמש ישהה ​​את ההקלדה, זה לא עובד ב-React. נסביר מדוע בסעיף הבא.

Debouncen ו-Rerenders

יישום זה משתמש בקלט מבוקר. המשמעות היא שערך המצב שולט בערך הקלט; בכל פעם שמשתמש מקליד בשדה החיפוש React מעדכן את המצב.

ב-React, כאשר ערך מצב משתנה, React מעבד מחדש את הרכיב ומבצע את כל הפונקציות שבתוכו.

ברכיב החיפוש שלמעלה, כאשר הרכיב מעבד מחדש, React מבצע את פונקציית ה-debounce. הפונקציה יוצרת טיימר חדש שעוקב אחר ההשהיה והטיימר הישן יושב בזיכרון. כאשר הזמן שלו עובר, הוא מפעיל את פונקציית החיפוש. המשמעות היא שפונקציית החיפוש לעולם אינה מבוטלת, היא מתעכבת ב-500 אלפיות השנייה. מחזור זה חוזר על עצמו בכל עיבוד - הפונקציה יוצרת טיימר חדש, הטיימר הישן יפוג ואז היא קוראת לפונקציית החיפוש

כדי שפונקציית ה-Debounce תעבוד, אתה צריך לקרוא לה פעם אחת בלבד. אתה יכול לעשות זאת על ידי קריאה לפונקציית debounce מחוץ לרכיב או על ידי באמצעות טכניקת שינון. בדרך זו, גם אם הרכיב ישוחזר, React לא תפעיל אותו שוב.

הגדרת הפונקציה Debounce מחוץ לרכיב החיפוש

הזז את להתנתק לתפקד מחוץ ל לחפש רכיב כפי שמוצג להלן:

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

עכשיו, ב לחפש רכיב, שיחה debouncedSearch ולהעביר את מונח החיפוש.

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

פונקציית החיפוש תיקרא רק לאחר חלוף תקופת ההשהיה.

שינון פונקציית Debounce

שינון מתייחס לשמירה במטמון של תוצאות של פונקציה ושימוש חוזר בהן כאשר אתה קורא לפונקציה עם אותם ארגומנטים.

כדי לשנן את להתנתק פונקציה, השתמש ב- השתמש ב-Memo וו.

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

שימו לב שעטפתם גם את handleSearch לתפקד ב-a השתמש בהתקשרות חזרה וו כדי להבטיח ש-React יתקשר אליו פעם אחת בלבד. בלי ה השתמש בהתקשרות חזרה הוק, React יבצע את handleSearch פונקציה עם כל עיבוד מחדש עושה את התלות של השתמש ב-Memo שינוי וו אשר בתורו יקרא את להתנתק פוּנקצִיָה.

כעת, React יתקשר רק ל- להתנתק לתפקד אם handleSearch הפונקציה או זמן ההשהיה משתנה.

בצע אופטימיזציה של חיפוש באמצעות Debounce

לפעמים, האטה יכולה להיות טובה יותר לביצועים. כאשר מטפלים במשימות חיפוש, במיוחד עם קריאות יקרות של מסד נתונים או API, שימוש בפונקציית debounce היא הדרך ללכת. פונקציה זו מציגה עיכוב לפני שליחת בקשות קצה אחורי.

זה עוזר להפחית את מספר הבקשות שנשלחות לשרת, מכיוון שהוא שולח את הבקשה רק לאחר שהעיכוב חלף והמשתמש השהה את ההקלדה. בדרך זו, השרת לא עומס יותר מדי בקשות, והביצועים נשארים יעילים.