كيفية تحسين أداء النموذج في React with useRef and useCallback Hooks

كيفية تحسين أداء النموذج في React with useRef and useCallback Hooks
القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

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





يحتوي React على خطاف useRef و useCallback ، والتي يمكن أن تساعد في تقليل التحديثات غير الضرورية وإعادة العرض.





اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى

استكشف التطبيقات الأكثر فاعلية لهذه الخطافات وقم بتسريع نماذج React الخاصة بك.





فهم useRef and useCallback Hooks

اثنان من أكثر ميزات React فعالية في تحسين الأداء هما خطاف useRef و useCallback.

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



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

كيفية تنزيل Linux على chromebook

مشاكل أداء النموذج الشائعة في React

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





تحدث هذه المشكلات عادةً بسبب ما يلي:

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

كيفية استخدام useRef and useCallback Hooks لتحسين النموذج

دعنا ندرس كيفية الاستفادة من استخدام React في استخدام خطافات الرد واستخدام خطافات رد الاتصال لتسريع نماذجنا.





الوصول إلى عناصر النموذج باستخدام useRef

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

 import React, { useRef } from 'react'; 

function Form() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    const inputValue = inputRef.current.value;
    console.log(inputValue);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

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

تحسين معالجات الأحداث باستخدام useCallback

ال useCallback يسمح لك الخطاف memoize معالجات الأحداث والوظائف الأخرى أن تقوم بتمريرها إلى المكونات الفرعية كدعامات. نتيجة لذلك ، قد لا يكون من الضروري إعادة تقديم المكونات الفرعية. هذا مثال:

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

function Form() {
  const [value, setValue] = useState('');
  
  const handleChange = useCallback((event) => {
    setValue(event.target.value);
  }, []);

  const handleSubmit = useCallback((event) => {
    event.preventDefault();
    console.log(value);
  }, [value]);

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

يستخدم هذا المثال الخطاف useCallback لحفظ ملف التعامل مع التغيير و مقبض المهام. يمكن أن يساعد هذا في منع إعادة العرض غير الضرورية للزر ومكونات المعلومات.

تحسين النموذج مع useRef and useCallback Hooks

لنلقِ نظرة على بعض الأمثلة الفعلية لكيفية تسريع النماذج في React باستخدام خطاف useRef و useCallback.

كيفية البحث عن بطاقة الرسومات في نظام التشغيل Windows 10

شطب المدخلات

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

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

function Form() {
  const [value, setValue] = useState('');

  const debouncedHandleChange = useCallback(
    debounce((value) => {
      console.log(value);
    }, 500),
    []
  );

  function handleChange(event) {
    setValue(event.target.value);
    debouncedHandleChange(event.target.value);
  }

  return (
    <form>
      <input type="text" value={value} onChange={handleChange} />
    </form>
  );
}

function debounce(func, wait) {
  let timeout;

  return function (...args) {
    clearTimeout(timeout);

    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

يستخدم هذا المثال وظيفة debounce لتأجيل تنفيذ التعامل مع التغيير طريقة 500 مللي ثانية. قد يؤدي ذلك إلى تحسين سرعة عنصر الإدخال والمساعدة في تجنب التحديثات غير الضرورية.

تهيئة كسول

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

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

 import React, { useRef, useState } from 'react'; 

function Form() {
const [value, setValue] = useState('');
const formStateRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();

    const formState = formStateRef.current || {
      field1: '',
      field2: '',
      field3: '',
    };

    console.log(formState);
  }

  function handleInputChange(event) {
    setValue(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

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

رازبيري باي 3 موديل ب مقابل ب +

أفضل الممارسات لاستخدام useRef and useCallback Hooks

لتعظيم فائدة استخدام خطافات useRef و useCallback ، التزم بالممارسات التالية الموصى بها:

  • للوصول إلى عناصر DOM وتحسين العمليات الحسابية التي تستغرق وقتًا طويلاً ، استخدم استخدم .
  • قم بتحسين معالجات الأحداث التي تم تمريرها بواسطة الدعامة والطرق الأخرى باستخدام useCallback .
  • لتذكر الوظائف وتجنب عرض المكونات الفرعية مرتين ، استخدم useCallback .
  • مع debounce ، يمكنك تحسين أداء النموذج ومنع التحديثات غير الضرورية.
  • اجعل الموارد الباهظة تنتظر حتى يتم الاحتياج إليها بالفعل باستخدام التهيئة البطيئة.

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

تحسين أداء النموذج في React

يعد كل من useRef و useCallback من الأدوات الرائعة التي يمكن أن تساعد في تقليل عمليات إعادة العرض والتحديثات غير الضرورية ، مما قد يؤدي إلى تحسين أداء النماذج الخاصة بك.

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