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

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

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

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

فهم useRef and useCallback Hooks

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

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

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

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

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

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

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

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

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

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

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

يستورد رد ، {useRef} من'تتفاعل';
وظيفةاستمارة() {
مقدار ثابت inputRef = useRef (باطل);
وظيفةمقبض(حدث) {
حدث.منع افتراضي();
مقدار ثابت inputValue = inputRef.current.value ؛
وحدة التحكم.log (inputValue) ؛
 }
يعود (
<استمارةعند تقديم={معالجة إرسال}>
<مدخليكتب="نص"المرجع={inputRef} />
<زريكتب="يُقدِّم">يُقدِّمزر>
استمارة>
 );
}

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

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

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

يستورد React ، {useCallback ، useState} من'تتفاعل';
وظيفةاستمارة() {
مقدار ثابت [value، setValue] = useState ('');

مقدار ثابت handleChange = useCallback ((حدث) => {
 setValue (event.target.value) ،
 }, []);
مقدار ثابت handleSubmit = useCallback ((حدث) => {
 event.preventDefault () ،
وحدة التحكم.log (القيمة) ؛
 }، [قيمة])؛
يعود (


"نص" القيمة = {value} onChange = {handleChange} />
"يُقدِّم"> إرسال </button>
 </form>
 );
}

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

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

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

شطب المدخلات

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

يستورد React ، {useCallback ، useState} من'تتفاعل';
وظيفةاستمارة() {
مقدار ثابت [value، setValue] = useState ('');
مقدار ثابت debounceHandleChange = useCallback (
 debounce ((قيمة) => {
وحدة التحكم.log (القيمة) ؛
 }, 500),
[]
 );
وظيفةالتعامل مع التغيير(حدث) {
setValue(حدث.هدف.قيمة);
debutedHandleChange(حدث.هدف.قيمة);
 }
يعود (
<استمارة>
<مدخليكتب="نص"قيمة={قيمة}على التغيير={التعامل مع التغيير} />
استمارة>
 );
}
وظيفةتنكر(func ، انتظر) {
يترك نفذ الوقت؛
يعودوظيفة (... أرغس) {
 clearTimeout (مهلة) ؛
 المهلة = setTimeout (() => {
 func.apply (هذا، args) ؛
 }, انتظر);
 };
}

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

تهيئة كسول

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

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

يستورد رد فعل ، {useRef، useState} من'تتفاعل';
وظيفةاستمارة() {
مقدار ثابت [value، setValue] = useState ('');
مقدار ثابت formStateRef = useRef (باطل);
وظيفةمقبض(حدث) {
حدث.منع افتراضي();
مقدار ثابت formState = formStateRef.current || {
 الحقل 1: '',
 الحقل 2: '',
 الحقل 3: '',
 };
وحدة التحكم.log (formState) ؛
 }
وظيفةhandleInputChange(حدث) {
setValue(حدث.هدف.قيمة);
 }
يعود (
<استمارةعند تقديم={معالجة إرسال}>
<مدخليكتب="نص"قيمة={قيمة}على التغيير={handleInputChange} />
<زريكتب="يُقدِّم">يُقدِّمزر>
استمارة>
 );
}

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

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

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

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

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

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

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

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