چگونه می توان زمینه جستجوی جهانی را در React ایجاد کرد (بدون کتابخانه)

میله های جستجوی جهانی متداول است ، اما نمایش داده های جستجوی بدون حفاری ناخوشایند می تواند مشکل باشد. بیایید یک زمینه جستجوی جهانی تمیز و عملکردی را با Debounce داخلی ایجاد کنیم-به کتابخانه های شخص ثالث نیاز ندارید.

چرا از یک جستجوی جهانی دفع شده استفاده می کنیم؟

مزایا شامل:

• کاهش اسپم تماس API
• حالت جستجوی مداوم در میان اجزای نامربوط
• UX بهبود یافته با حداقل کد اضافی

مرحله 1: زمینه جستجو را ایجاد کنید

این زمینه به روزرسانی های اصطلاح جستجو را کنترل می کند و داخلی را باز می کند:

// searchContext.js
import { createContext, useContext, useState, useRef } from "react";

const SearchContext = createContext(null);

export function SearchProvider({ children }) {
  const [searchTerm, setSearchTerm] = useState("");
  const debounceRef = useRef(null);

  const updateSearch = (term) => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
      setSearchTerm(term);
    }, 300); // 300ms debounce
  };

  return (
    
      {children}
    
  );
}

export function useSearch() {
  return useContext(SearchContext);
}

مرحله 2: یک مؤلفه ورودی جستجو ایجاد کنید

این مؤلفه زمینه جستجوی جهانی را در مورد تایپ به روز می کند:

// SearchInput.js
import { useSearch } from "./searchContext";

function SearchInput() {
  const { updateSearch } = useSearch();

  const handleChange = (e) => {
    updateSearch(e.target.value);
  };

  return ;
}

export default SearchInput;

مرحله 3: از نتایج جستجو در هر کجا استفاده کنید

هر مؤلفه هم اکنون می تواند در اصطلاح جستجوی تخریب شده مشترک باشد:

// SearchResults.js
import { useSearch } from "./searchContext";

function SearchResults() {
  const { searchTerm } = useSearch();

  return 

    
Searching for: {searchTerm}
    {/* Add your search fetching logic here */}
  
;
}

export default SearchResults;

مرحله 4: برنامه خود را با ارائه دهنده بسته بندی کنید

// App.js
import { SearchProvider } from "./searchContext";
import SearchInput from "./SearchInput";
import SearchResults from "./SearchResults";

function App() {
  return (
    
      
      
    
  );
}

export default App;

جوانب مثبت و منفی

✅ جوانب مثبت

• بدون بسته های اضافی ساخته شده است
• اصطلاح جستجوی جهانی در هر کجا قابل دسترسی است
• ساده و سبک وزن

⚠ منفی

• تأخیر ثابت Debounce (300ms سخت)
• تماس های API در حال حاضر فجیع را لغو نمی کند
• حداقل رسیدگی به خطای برای رفتارهای جستجوی پیچیده

🚀 گزینه های دیگر

• توهین کتابخانه برای کنترل بیشتر
• پرس و جو برای مدیریت حالت جستجوی API-Layer

خلاصه

با بسته بندی یک بدهی ساده در یک ارائه دهنده زمینه ، می توانید سیستم های جستجوی ظریف و مقیاس پذیر را در واکنش نشان دهید که تقریباً بدون سرپرست نیست. ایده آل برای داشبورد ، پانل های سرپرست و ابزارهای داخلی که در آن عملکرد اهمیت دارد.

اگر این مفید را پیدا کردید ، می توانید از من در اینجا پشتیبانی کنید: buymeacoffee.com/hexshift