متى تستخدم useMemo و useCallback: دليل موجز لمحبي React
نشرت: 2022-07-30إذا كنت مطورًا لـ React ، فربما تكون قد دخلت بالفعل في مناقشات React useMemo vs useCallback عبر الإنترنت وانتهى بك الأمر أكثر تشويشًا من أي وقت مضى. قد يكون من الصعب جدًا معرفة الفرق بين useMemo و useCallback. هذا حسن! قد يكون من الصعب أن تدور حول React-Hooks في البداية ، لكنها قد تكون مفيدة للغاية في المستقبل.
في هذه المقالة ، سنوضح لك الفرق بين useCallback و useMemo ووقت استخدام useCallback و useMemo.
جدول المحتويات
الفرق بين useMemo و useCallback
تم تقديم خطافين مدمجين مع React 16.8. تم تقديم هذه الميزات لتحسين الأداء. يبدو الفرق بين useMemo و useCallback ضئيلًا ، لذا سنحاول إزالة الالتباس.
ما هي React-Hooks؟
الخطافات هي ميزات جديدة تم تقديمها في React والتي تسمح لـ useState وميزات React الأخرى دون كتابة صنف. الخطافات هي طرق ووظائف "ترتبط" بميزات حالة ودورة حياة React.
useCallback مقابل useMemo
يتم استخدام الخطاف useCallback عندما يتم إعادة عرض مكون فرعي مرارًا وتكرارًا دون الحاجة إلى ذلك. عند استخدام useCallback ، يمكنك منع إعادة العرض غير الضرورية هذه عن طريق إرجاع نفس مثيل تلك الوظيفة التي يتم تمريرها بدلاً من إنشاء مثيل جديد كل مرة. يمكن أن يوفر هذا قدرًا كبيرًا من الوقت (والمال الذي يتم إنفاقه على ساعات التطوير). سيؤدي تمرير مجموعة من التبعيات مع رد نداء مذكّر إلى إصدار مذكّر سيتم تغييره فقط عندما تتغير التبعية.
useMemo يستخدم في المكون الوظيفي لـ React. يتم استخدامه لإرجاع قيمة ذاكرة. يشير Memoization إلى عملية توفير وقت إعادة الترجمة عن طريق إرجاع نتيجة مخزنة مؤقتًا بدلاً من إعادة ترجمة دالة بنفس الوسيطة مرة أخرى للتشغيل التالي. يتم إرجاع النتيجة المخزنة مؤقتًا في المرة التالية التي يتم استدعاؤها. توفر خطافات useMemo قيمًا معينة للذاكرة.
من الواضح أن هناك بعض أوجه التشابه. في كل من useMemo و useCallback ، يقبل الخطاف وظيفة بالإضافة إلى مجموعة من التبعيات. ومع ذلك ، سيتذكر useCallback القيمة التي تم إرجاعها ، وسيتذكر useMemo الوظيفة. بمعنى آخر ، يخزن أحدهما نوع قيمة مؤقتًا ، والآخر يخزن دالة.
- اقرأ المزيد - كيف ولماذا يجب أن تبقي ملفاتك منظمة
- أفضل 9 طرق لاستخدام الأدوات الإلكترونية في الفصل الدراسي
متى تستخدم useCallback مقابل useMemo
إذن ، متى يجب استخدام useCallback ، ومتى يكون useMemo هو الخيار الأفضل؟ لنلقي نظرة على مثال. إذا قبلت التعليمات البرمجية الثقيلة والمكلفة من الناحية الحسابية الوسيطات وأرجعت قيمة ، فإن useMemo هو الخيار الأفضل. بهذه الطريقة ، يمكنك الاستمرار في الرجوع إلى القيمة بين العروض دون إعادة تشغيل الكود وإضاعة وقتك وقوتك الحسابية.
إذا كنت بحاجة إلى الاحتفاظ بمثيل دالة ثابتًا عبر عمليات تصيير متعددة ، فيجب عليك استخدام useCallback بدلاً من ذلك لأنه يضع الوظيفة بشكل أساسي خارج نطاق مكون React للحفاظ على سلامتها.
ما هو useEffect؟
لقد ذكرنا بالفعل مصفوفة التبعية ، والتي ربما تكون قد واجهتها عند استخدام useEffect. useEffect هو خطاف تفاعل آخر. يتم استخدامه للتعامل مع الآثار الجانبية في المكونات الوظيفية باستخدام منطق وسيطة رد الاتصال. التبعيات هي قائمة التبعيات للأثر الجانبي ، على سبيل المثال ، الدعائم أو قيم الحالة.
يوضح هذا الخطاف React أن المكون يحتاج إلى تنفيذ إجراء بعد التصيير. عندما يتم تحديث DOM ، سيتم تخزين التأثير الذي تمرره. يمكنك أيضًا إجراء جلب البيانات لتحقيق هذه النتيجة.
باختصار ، فإن useCallback و useMemo و useEffect كلها معنية بتحسين الأداء بين إعادة عرض المكونات في تطبيقات React.
من المهم ألا تفرط في استخدام الخطافات. تقدم الخطافات منطقًا جديدًا ومعقدًا ، ومن المحتمل أن يكون لها تأثير معاكس مما كنت تقصده ، مما يؤدي إلى حدوث مشكلات في الأداء بدلاً من حلها. يجب استخدام useMemo فقط في عمليات حسابية باهظة الثمن حقًا.
لا تستخدم useMemo أو useCallback لإصلاح المشكلات الأساسية في تطبيقك. في النهاية ، ستعاود هذه المشكلات الظهور وتطاردك ، لذا من الأفضل معالجة أي أخطاء معروفة أولاً.
- اقرأ المزيد - كيفية اختيار أفضل CMS
- ما هي إيجابيات وسلبيات طرق التشفير؟
استنتاج
نأمل أن تكون هذه المقالة ثاقبة ، وأنك تفهم الخطافين بشكل أفضل. في تلخيص:
- كلاهما يقبل دالة ومجموعة من التبعيات
- يحفظ useMemo القيمة التي تم إرجاعها ، بينما يحفظ useCallback الوظيفة.
الفرق بين useMemo و useCallback واضح جدًا! هذه الأدوات لديها القدرة على توفير الوقت والمال ، ولكن فقط إذا تم استخدامها في السياق والبيئة المناسبة.
آمل أن يكون هذا البرنامج التعليمي قد ساعدك في معرفة وقت استخدام useMemo و useCallback: دليل موجز لمحبي React . إذا كنت تريد أن تقول أي شيء ، فأخبرنا بذلك من خلال أقسام التعليقات. إذا أعجبك هذا المقال ، فيرجى مشاركته ومتابعة WhatVwant على Facebook و Twitter و YouTube لمزيد من النصائح الفنية.
متى تستخدم useMemo و useCallback - FAQs
ما الفرق بين useCallback و useMemo؟
يتم استخدام UseCallsback لتحسين سلوك عرض مكونات دالة React ، بينما يتم استخدام useMemo لحفظ الوظائف باهظة الثمن لتجنب الاضطرار إلى استدعاؤها في كل تصيير.
متى يجب استخدام رد الاتصال؟
يتم استخدام الخطاف useCallback عندما يكون لديك مكون يقوم الطفل بالعرض فيه مرارًا وتكرارًا دون الحاجة.
لماذا نستخدم useMemo؟
useMemo هو أحد الروابط التي تقدمها React. يسمح هذا الخطاف للمطورين بالتخزين المؤقت لقيمة المتغير مع قائمة التبعيات.
هل يؤدي useMemo إلى إعادة التصيير؟
نعم ، هذا ممكن تمامًا. ما يفعله useMemo بعد حدوث إعادة الإرسال ، فإنه يقارن القيم في مصفوفة التبعية الخاصة به ، إذا لم تتغير ، فسيتم إرجاع آخر قيمة محسوبة ، وإلا فإنها تعيد الحساب.
كيف يمكنني استخدام useEffect و useCallback؟
الطريقة الوحيدة التي يمكن بها لشفرة useEffect أن تفعل أي شيء مرئي هي إما تغيير الحالة لتتسبب في إعادة تصيير DOM أو تعديل DOM مباشرة.
هل useMemo ضحلة؟
تستخدم memo مقارنة ضحلة بين خاصيات المكونات وبسبب كيفية عمل JavaScript ، فإن المقارنة السطحية للكائنات ستؤدي إلى إرجاع false حتى لو كانت لها نفس القيم.