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

المشكلة

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

• الاستخدام غير الفعال لموارد الشبكة.
• ظروف السباق المحتملة.
• تحميل غير ضروري على الخادم.

أدخل الرفض

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

لماذا استخدام الارتداد؟

• تحسين الأداء: يقلل عدد استدعاءات واجهة برمجة التطبيقات غير الضرورية.
• تحسين الموارد: يقلل من تحميل الخادم واستخدام الشبكة.
• تجربة المستخدم المحسنة: يمنع التأخير والأخطاء المحتملة من المكالمات السريعة والمتتالية.

دور الاستخدامالمرجع

في React، useRef عبارة عن خطاف يسمح لك بالاحتفاظ بالقيم القابلة للتغيير بين عمليات العرض دون تشغيل إعادة التصيير. إنها في الأساس حاوية تحتوي على قيمة قابلة للتغيير.

لماذا نستخدم useRef هنا؟

• استمرار التحديثات المتراكمة: نحن بحاجة إلى تتبع التحديثات المتراكمة بين عمليات العرض دون التسبب في إعادة العرض.
• الوصول إلى القيمة الحالية القابلة للتغيير: useRef يمنحنا خاصية .current التي يمكننا قراءتها وكتابتها.

خطاف useDebouncedUpdate

دعونا نتعمق في الكود ونفهم كيف يتم تجميع كل ذلك معًا.

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

كسرها

1. تجميع التحديثات باستخدام المرجع

نقوم بتهيئة useRef المسمى بالتحديثات المتراكمة لتخزين المعلمات المجمعة لجميع التحديثات الواردة.

const AccumatedUpdates = useRef(خالية);

2. إلغاء استدعاء API

نقوم بإنشاء تحديثات عملية للدالة المرتدة باستخدام أداة الارتداد المساعدة من واجهة المستخدم المادية.

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• لماذا useRef لتحديثات العملية؟ نحن نستخدم useRef لضمان عدم إعادة إنشاء الوظيفة المحذوفة في كل عرض، مما سيؤدي إلى إعادة تعيين مؤقت الارتداد.

3. التعامل مع التحديثات باستخدام useCallback

وظيفة HandleUpdate هي المسؤولة عن تجميع التحديثات وإطلاق استدعاء API المرتد.

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• دمج المعلمات: نقوم بدمج المعلمات الجديدة مع أي معلمات موجودة لضمان التقاط كافة التحديثات.
• Trigger Debounce: في كل مرة يتم استدعاء HandleUpdate، نقوم بتشغيل ProcessUpdates()، ولكن يتم إلغاء استدعاء API الفعلي.

4. التنظيف باستخدام تأثير الاستخدام

نقوم بمسح الوظيفة المرتدة عند إلغاء تحميل المكون لمنع تسرب الذاكرة.

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

كيف يعمل

1. تجميع المعلمات: يضيف كل تحديث معلماته إلى AccumatedUpdates.current، ويتم دمجها مع أي معلمات موجودة.
2. إلغاء التنفيذ: تنتظر تحديثات العملية تأخير المللي ثانية من عدم النشاط قبل التنفيذ.
3. استدعاء واجهة برمجة التطبيقات: بمجرد انقضاء الوقت المرتد، يتم استدعاء apiUpdate باستخدام المعلمات المدمجة.
4. إعادة تعيين التحديثات المتراكمة: بعد استدعاء واجهة برمجة التطبيقات، نقوم بإعادة تعيين التحديثات المتراكمة إلى قيمة خالية.

مثال الاستخدام

إليك كيفية استخدام هذا الخطاف في أحد المكونات:

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    

       handleChange("username", e.target.value)}
      />
       handleChange("notifications", e.target.checked)}
      />
    
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• إجراءات المستخدم: عندما يقوم المستخدم بكتابة الإعدادات أو تبديلها، يتم استدعاء HandleChange.
• التحديثات المحذوفة: يتم تجميع التغييرات وإرسالها إلى واجهة برمجة التطبيقات بعد 500 مللي ثانية من عدم النشاط.

خاتمة

من خلال الجمع بين الارتداد وتراكم الحالة، يمكننا إنشاء تطبيقات فعالة وسريعة الاستجابة. يضمن الخطاف useDebouncedUpdate تجميع التغييرات السريعة معًا، مما يقلل من استدعاءات واجهة برمجة التطبيقات غير الضرورية ويحسن الأداء.

الوجبات الرئيسية:

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

لا تتردد في دمج هذا الخطاف في مشاريعك وتعديله ليناسب احتياجاتك الخاصة. برمجة سعيدة!