Cách cải thiện hiệu suất tìm kiếm trong phản ứng với việc gỡ lỗi
Trong React, khi triển khai chức năng tìm kiếm, trình xử lý onChange gọi chức năng tìm kiếm mỗi khi người dùng nhập vào hộp nhập liệu. Cách tiếp cận này có thể gây ra các vấn đề về hiệu suất, đặc biệt nếu thực hiện lệnh gọi API hoặc truy vấn cơ sở dữ liệu. Các cuộc gọi thường xuyên tới chức năng tìm kiếm có thể làm quá tải máy chủ web, dẫn đến sự cố hoặc giao diện người dùng không phản hồi. Việc gỡ lỗi giải quyết vấn đề này.
Debounce là gì?
Trong quá trình triển khai chức năng tìm kiếm điển hình trong React, người ta thường gọi hàm xử lý onChange với mỗi lần nhấn phím, như minh họa bên dưới:
import { useState } from "react";
export default function Search() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
};
const handleChange = (e) => {
setSearchTerm(e.target.value);
// Calls search function
handleSearch();
};
return (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."/>
);
}
Để tối ưu hóa hiệu suất, điều quan trọng là phải cân nhắc rằng việc cập nhật thường xuyên kết quả tìm kiếm thông qua lệnh gọi tới chương trình phụ trợ có thể trở nên tốn kém khi nhập các từ khóa như “webdev”. Trong trường hợp này, ứng dụng sẽ gửi yêu cầu đến phần phụ trợ mỗi khi nhập một ký tự mới, bao gồm các ký tự như “w”, “we”, “web”, v.v.
Việc gỡ lỗi liên quan đến việc trì hoãn việc thực thi một chức năng cho đến khi khung thời gian được phân bổ đã trôi qua kể từ lần gọi cuối cùng của nó. Trong trường hợp này, chức năng bị trả lại sẽ chỉ được kích hoạt khi người dùng ngừng nhập sau khoảng thời gian đã chỉ định. Nếu tiếp tục nhập dữ liệu vào trong khoảng thời gian được chỉ định, bộ đếm thời gian sẽ đặt lại và bắt đầu một vòng xử lý khác. Chu kỳ này lặp lại miễn là không có phím nhập bổ sung nào được thực hiện và sẽ kết thúc khi người dùng tạm dừng hoạt động gõ của họ.
Việc gỡ lỗi cho phép ứng dụng quản lý hiệu quả các yêu cầu máy chủ bằng cách trì hoãn chúng cho đến khi người dùng ngừng nhập dữ liệu, do đó giảm thiểu các tìm kiếm không cần thiết và giảm bớt căng thẳng cho máy chủ.
Cách gỡ bỏ tìm kiếm trong React
Khi tìm cách kết hợp chức năng gỡ lỗi trong một ứng dụng web, tồn tại nhiều thư viện có sẵn cung cấp khả năng này. Ngoài ra, người ta có thể chọn xây dựng thuật toán gỡ lỗi ngay từ đầu bằng cách sử dụng các phương thức setTimeout và clearTimeout của JavaScript.
Bài viết này sử dụng chức năng gỡ lỗi được cung cấp bởi thư viện Lodash, đây là một tiện ích JavaScript phổ biến cung cấp nhiều chức năng để thao tác dữ liệu và tối ưu hóa hoạt động.
Để bắt đầu quá trình phát triển chức năng tìm kiếm trong dự án React hiện tại của bạn hoặc bằng cách tạo một dự án mới, trước tiên cần thiết lập một thành phần mới có tên là “Tìm kiếm”. Điều này có thể đạt được bằng cách sử dụng ứng dụng React hiện có hoặc sử dụng tiện ích’tạo ứng dụng React’để tạo môi trường React đầy đủ chức năng.
Trong tệp thành phần Tìm kiếm, người ta có thể sử dụng đoạn mã được cung cấp để tạo trường nhập tìm kiếm sẽ thực thi chức năng gọi lại được chỉ định sau mỗi lần nhấn phím.
import { useState } from "react";
export default function Search() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
};
const handleChange = (e) => {
setSearchTerm(e.target.value);
// Calls search function
handleSearch();
};
return (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."/>
);
}
Để trì hoãn việc thực thi hàm handSearch bằng cách sử dụng hàm debounce do thư viện Lodash cung cấp, người ta có thể chuyển hàm đã nói làm đối số cho phương thức debounce . Điều này sẽ đảm bảo rằng chức năng chỉ được thực thi một lần trong một khoảng thời gian nhất định, sau đó mọi lệnh gọi tiếp theo trong khung thời gian đó sẽ bị bỏ qua cho đến khi hết thời gian chờ.
import debounce from "lodash.debounce";
import { useState } from "react";
export default function Search() {
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 (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."/>
);
}
Trong quá trình triển khai cơ chế gỡ lỗi, chúng tôi giới thiệu một phiên bản tùy chỉnh của hàm handSearch bằng cách chấp nhận nó làm đối số cùng với một khoảng thời gian được chỉ định, cụ thể là 500 mili giây, đóng vai trò là ngưỡng để kích hoạt việc thực thi hàm nói trên bị trì hoãn.
Đoạn mã nói trên dự kiến sẽ trì hoãn việc thực thi chức năng handSearch cho đến khi người dùng ngừng nhập dữ liệu; tuy nhiên, chức năng này không hoạt động như dự định trong khung React. Những lý do cho sự khác biệt này sẽ được khám phá sâu hơn trong phần tiếp theo.
Gỡ bỏ và kết xuất lại
Ứng dụng hiện tại sử dụng đầu vào được quy định, trong đó trạng thái của hệ thống xác định nội dung được cung cấp dưới dạng đầu ra thông qua thanh tìm kiếm. Với mỗi lần nhấn phím được người dùng nhập vào trong giao diện cụ thể này, React sẽ bổ sung các sửa đổi cho cấu hình trạng thái tương ứng.
React là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng. Bất cứ khi nào giá trị trạng thái trong thành phần React thay đổi, toàn bộ thành phần đó sẽ được kết xuất lại, bao gồm việc thực thi lại tất cả các chức năng của nó từ đầu đến cuối. Điều này cho phép thực hiện cập nhật động cho giao diện mà không yêu cầu làm mới toàn bộ trang.
Thành phần tìm kiếm nói trên trải qua quá trình hiển thị lại, trong đó React kích hoạt cơ chế gỡ lỗi. Bộ hẹn giờ mới được tạo để theo dõi độ trễ trong khi bộ hẹn giờ hiện có vẫn hoạt động trong bộ nhớ hệ thống. Khi hết hạn sau, chức năng tìm kiếm sẽ được kích hoạt sau khi bị trì hoãn trong 500 mili giây. Do đó, trình tự này lặp lại sau mỗi lần hiển thị vì bộ hẹn giờ mới được ưu tiên hơn bộ hẹn giờ trước đó, sau đó bộ hẹn giờ cũ hơn sẽ hoàn thành giai đoạn kết thúc trước khi gọi hàm tìm kiếm lặp đi lặp lại.
Để đảm bảo rằng một hàm bị trả lại hoạt động như dự định trong thành phần React, điều quan trọng là phải giới hạn việc thực thi nó ở một phiên bản duy nhất. Một cách tiếp cận để đạt được mục tiêu này liên quan đến việc sử dụng kỹ thuật ghi nhớ kết hợp với chức năng gỡ lỗi. Bằng cách đó, ngay cả khi thành phần trải qua quá trình hiển thị lại, hàm bị lỗi sẽ không được thực thi lặp lại.
Xác định hàm gỡ lỗi bên ngoài thành phần tìm kiếm
Hãy cân nhắc việc di chuyển cơ chế thực thi bị trì hoãn, chẳng hạn như debounce , đến một vị trí bên ngoài thành phần Search, như được minh họa trong ví dụ được cung cấp bên dưới:
import debounce from "lodash.debounce"
const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);
Trong lần lặp lại hiện tại của thành phần Tìm kiếm trong dự án của chúng tôi, chúng tôi sẽ triển khai một phiên bản đã được gỡ bỏ của hàm search bằng cách gọi phương thức debouncedSearch và cung cấp cho nó truy vấn tìm kiếm làm đối số.
export default function Search() {
const [searchTerm, setSearchTerm] = useState("");
const handleChange = (e) => {
setSearchTerm(e.target.value);
// Calls search function
debouncedSearch(searchTerm);
};
return (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."/>
);
}
Chức năng của chức năng tìm kiếm phụ thuộc vào việc hết khoảng thời gian được xác định trước, tại thời điểm đó nó sẽ được gọi.
Ghi nhớ hàm gỡ lỗi
Ghi nhớ liên quan đến việc lưu trữ kết quả đầu ra được tạo bởi một hàm cụ thể khi nhận được đầu vào cụ thể, để có thể dễ dàng truy xuất và sử dụng nó nếu hàm đó được gọi lại với các tham số giống hệt nhau. Kỹ thuật này được sử dụng như một chiến lược tối ưu hóa để giảm thiểu chi phí tính toán, đặc biệt khi liên quan đến các tính toán lặp đi lặp lại.
Để lưu vào bộ đệm và trì hoãn việc thực thi một cách hiệu quả chức năng đã gỡ lỗi bằng cách sử dụng cơ chế Ghi nhớ của React, hãy sử dụng hook useMemo kết hợp với chiến lược triển khai thích hợp để đạt được hiệu ứng gỡ lỗi mong muốn.
import debounce from "lodash.debounce";
import { useCallback, useMemo, useState } from "react";
export default function Search() {
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 (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."/>
);
}
Điều quan trọng cần lưu ý là chúng tôi đã đặt hàm handSearch trong hook useCallback để đảm bảo rằng React sẽ chỉ gọi hàm này một lần. Nếu không có hook useCallback, React sẽ liên tục thực thi hàm handSearch trong mỗi quá trình kết xuất, dẫn đến thay đổi các phần phụ thuộc của hook useMemo và do đó kích hoạt hàm debounce.
React sẽ chỉ gọi hàm bị loại bỏ trong các trường hợp trong đó hàm handSearch hoặc khoảng thời gian trễ trải qua thay đổi.
Tối ưu hóa tìm kiếm với Debounce
Đôi khi, tốc độ vừa phải có thể dẫn đến nâng cao năng suất. Trong các tình huống liên quan đến truy vấn cơ sở dữ liệu hoặc API tốn kém trong quá trình hoạt động tìm kiếm, việc sử dụng chức năng gỡ lỗi sẽ trở nên thận trọng. Hàm này áp đặt tạm dừng tạm thời trước khi chuyển tiếp yêu cầu đến chương trình phụ trợ.
Việc triển khai cơ chế tải hình ảnh bị trì hoãn trong các trang web có thể giảm bớt đáng kể gánh nặng cho máy chủ bằng cách hạn chế tần suất yêu cầu được gửi tới chúng. Bằng cách định cấu hình hệ thống đợi cho đến khi người dùng tạm dừng đầu vào trước khi gửi yêu cầu về hình ảnh, chúng tôi giảm thiểu khối lượng yêu cầu được xử lý đồng thời. Do đó, phương pháp này duy trì hiệu suất máy chủ tối ưu đồng thời ngăn ngừa tình trạng cạn kiệt tài nguyên hoặc chậm trễ về thời gian phản hồi.