چگونه در React می‌توان تکنیک debounce را اجرا کرد؟

mohsen•1 ماه قبل•1 ماه قبل
ارسال شده در
react

دیبانسینگ (Debouncing) یک تکنیک برنامه نویسی است که به ما کمک می کند تا با محدود کردن تعداد بار فراخوانی یک تابع، پرفرمنس را افزایش دهیم. برای مثال می خواهیم در زمان تایپ کاربر در باکس جستجو، نتایجی را به کاربر نمایش دهیم، اما با هر کلیک نمی خواهیم یک درخواست به سمت سرور ارسال کنیم. به همین دلیل با استفاده از تکنیک debounce زمان ارسال درخواست به سمت سرور را مدیریت می کنیم تا از ارسال درخواست‌های مکرر به سرور به‌دلیل تایپ سریع کاربر جلوگیری کنیم.

برای پیاده‌سازی debounce در React، چندین روش وجود دارد:

۱. استفاده از تابع debounce به‌صورت مستقل

شما می‌توانید تابع debounce خود را به صورت زیر پیاده‌سازی کنید:

      function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    const context = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.handleOnChange = debounce(this.handleOnChange.bind(this), 200);
  }

  handleOnChange(event) {
    // فراخوانی Ajax
  }

  render() {
    return <input type="search" onChange={this.handleOnChange} />;
  }
}

در این روش، با استفاده از debounce، تابع handleOnChange فقط در صورتی اجرا می‌شود که کاربر پس از تایپ کردن تایم‌اوت مشخصی (به‌عنوان مثال 200 میلی‌ثانیه) بدون وارد کردن متن جدید بماند.

۲. استفاده از کتابخانه‌های موجود

همچنین می‌توانید از کتابخانه‌هایی نظیر lodash یا awesome-debounce-promise استفاده کنید، که این کار را برای شما ساده‌تر می‌کنند. به‌عنوان مثال:

      import { debounce } from 'lodash';

class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.debouncedHandleOnChange = debounce(this.handleOnChange.bind(this), 200);
  }

  handleOnChange(event) {
    // فراخوانی Ajax
  }

  render() {
    return <input type="search" onChange={this.debouncedHandleOnChange} />;
  }
}

در این حالت، از debounce موجود در lodash استفاده شده است.

۳. استفاده از Hooks

در صورتی که با React Hooks کار می‌کنید، می‌توانید از useCallback به همراه useEffect برای پیاده‌سازی debounce خود استفاده کنید:

      import React, { useState, useCallback } from 'react';
import { debounce } from 'lodash';

const SearchComponent = () => {
  const [searchText, setSearchText] = useState('');

  const handleSearch = useCallback(debounce((text) => {
    // فراخوانی Ajax
  }, 500), []);

  const onChange = (event) => {
    setSearchText(event.target.value);
    handleSearch(event.target.value);
  };

  return <input value={searchText} onChange={onChange} />;
};

در این مثال، به محض تغییر در ورودی، مقدار جدید به handleSearch ارسال می‌شود که با استفاده از debounce، از تعداد زیاد درخواست‌ها به سرور جلوگیری می‌شود.

۴. نکات مهم

  • مدیریت برنامه‌نویسی رویداد: React رویدادها را به‌صورت SyntheticEvent مدیریت می‌کند، که پس از استفاده از آن، به استخر بازگردانده می‌شود. بنابراین، برای جلوگیری از پاک شدن مقادیر از رویداد، می‌توانید از event.persist() استفاده کنید.
  • اجتناب از ساخت مجدد تابع debounce: مطمئن شوید که هر بار تابع debounce جدیدی ایجاد نکنید. این احتمال وجود دارد که در هر بار تغییر ورودی، دوباره تابع debounce ساخته شود، که می‌تواند به نتایج غیرمنتظره منجر شود.

با استفاده از این تکنیک‌ها، می‌توانید اطمینان حاصل کنید که سیستم شما موثرتر و بهینه‌تر عمل می‌کند و درخواست‌های غیرضروری به سرور ارسال نمی‌شود.

رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!