كيفية تحسين أداء البحث في React مع Debounceing

في React، عند تنفيذ وظيفة البحث، يستدعي معالج onChange وظيفة البحث في كل مرة يكتب فيها المستخدم داخل مربع الإدخال. يمكن أن يسبب هذا الأسلوب مشكلات في الأداء، خاصة في حالة إجراء استدعاءات واجهة برمجة التطبيقات (API) أو الاستعلام عن قاعدة البيانات. قد تؤدي الاستدعاءات المتكررة لوظيفة البحث إلى زيادة التحميل على خادم الويب، مما يؤدي إلى حدوث أعطال أو عدم استجابة واجهة المستخدم. الرفض يحل هذه المشكلة.

ما هو الارتداد؟

عادةً، يمكنك تنفيذ وظيفة البحث في 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"، فسيرسل التطبيق طلبًا إلى الواجهة الخلفية بالقيم "w" و"we" و"web" وما إلى ذلك.

الارتداد هو أسلوب يعمل عن طريق تأخير تنفيذ الوظيفة حتى انقضاء فترة تأخير. تكتشف وظيفة الارتداد كل مرة يقوم فيها المستخدم بالكتابة وتمنع الاتصال بمعالج البحث حتى انقضاء التأخير. إذا استمر المستخدم في الكتابة خلال فترة التأخير، تتم إعادة ضبط المؤقت وتستدعي React الوظيفة مرة أخرى للتأخير الجديد. تستمر هذه العملية حتى يتوقف المستخدم عن الكتابة مؤقتًا.

من خلال الانتظار حتى يتوقف المستخدمون عن الكتابة مؤقتًا، يضمن الارتداد أن يقوم تطبيقك بإجراء طلبات البحث الضرورية فقط وبالتالي تقليل تحميل الخادم.

كيفية رفض البحث في React

هناك العديد من المكتبات التي يمكنك استخدامها لتنفيذ الارتداد. يمكنك أيضًا اختيار تنفيذه بنفسك من البداية باستخدام JavaScript setTimeout و com.clearTimeout المهام.

تستخدم هذه المقالة وظيفة الارتداد من مكتبة لوداش.

بافتراض أن لديك مشروع 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 الوظيفة، قم بتمريرها إلى نبذ وظيفة من لوداش.

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 الوظيفة، ووقت التأخير بالمللي ثانية، أي 500 مللي ثانية.

في حين أن الكود أعلاه يجب أن يؤخر الاتصال بـ HandleSearch الطلب حتى يتوقف المستخدم عن الكتابة مؤقتًا، فهو لا يعمل في React. سنشرح السبب في القسم التالي.

الرفض وإعادة العرض

يستخدم هذا التطبيق مدخلات تسيطر عليها. وهذا يعني أن قيمة الحالة تتحكم في قيمة الإدخال؛ في كل مرة يكتب فيها المستخدم في حقل البحث، يقوم React بتحديث الحالة.

في React، عندما تتغير قيمة الحالة، تعيد React تصيير المكون وتنفذ جميع الوظائف الموجودة بداخله.

في مكون البحث أعلاه، عندما يُعاد تصيير المكون، تنفذ React وظيفة الارتداد. تقوم الوظيفة بإنشاء مؤقت جديد يتتبع التأخير ويوضع المؤقت القديم في الذاكرة. وعندما ينقضي الوقت، يقوم بتشغيل وظيفة البحث. وهذا يعني أن وظيفة البحث لا يتم رفضها أبدًا، بل يتم تأخيرها بمقدار 500 مللي ثانية. تتكرر هذه الدورة في كل عرض - تقوم الوظيفة بإنشاء مؤقت جديد، وتنتهي صلاحية المؤقت القديم ثم تستدعي وظيفة البحث

لكي تعمل وظيفة الارتداد، يجب عليك استدعاؤها مرة واحدة فقط. يمكنك القيام بذلك عن طريق استدعاء وظيفة الارتداد خارج المكون أو عن طريق باستخدام تقنية الحفظ. بهذه الطريقة، حتى لو تم إعادة تصيير المكون، فلن تنفذه React مرة أخرى.

تعريف وظيفة الارتداد خارج مكون البحث

حرك ال نبذ وظيفة خارج يبحث المكون كما هو موضح أدناه:

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

لن يتم استدعاء وظيفة البحث إلا بعد انقضاء فترة التأخير.

حفظ وظيفة الارتداد

يشير الحفظ إلى تخزين نتائج دالة مؤقتًا وإعادة استخدامها عند استدعاء الدالة بنفس الوسائط.

لحفظ نبذ الوظيفة، استخدم useMemo خطاف.

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 وظيفة في أ useCallback ربط للتأكد من أن React يستدعيها مرة واحدة فقط. بدون ال useCallback ربط، رد فعل سيتم تنفيذ HandleSearch تعمل مع كل عملية إعادة تقديم مما يجعل تبعيات ملف useMemo تغيير الخطاف والذي بدوره سيستدعي نبذ وظيفة.

الآن، سوف تقوم React فقط باستدعاء نبذ وظيفة إذا HandleSearch وظيفة أو يتغير وقت التأخير.

تحسين البحث باستخدام Debounce

في بعض الأحيان، قد يكون التباطؤ أفضل للأداء. عند التعامل مع مهام البحث، خاصة مع قواعد البيانات باهظة الثمن أو استدعاءات واجهة برمجة التطبيقات (API)، فإن استخدام وظيفة الارتداد هو الحل الأمثل. تقدم هذه الوظيفة تأخيرًا قبل إرسال طلبات الواجهة الخلفية.

فهو يساعد على تقليل عدد الطلبات المقدمة إلى الخادم، حيث أنه لا يرسل الطلب إلا بعد انقضاء التأخير وتوقف المستخدم عن الكتابة مؤقتًا. بهذه الطريقة، لا يتم تحميل الخادم بشكل زائد بعدد كبير جدًا من الطلبات، ويظل الأداء فعالاً.