مقدمة

يقدم React نطاقًا واسعًا من الخطافات التي تساعدنا في إنشاء تطبيقات ديناميكية بكفاءة. من بين هذه الخطافات، useMemo وuseCallback هي أدوات أساسية لتحسين أداء مكوناتك. على الرغم من أن كلاهما يخدم غرضًا مشابهًا — لمنع عمليات إعادة الحساب غير الضرورية أو إعادة إنشاء الوظائف — إلا أنهما مناسبان لسيناريوهات مختلفة.

في هذه المقالة، سنستكشف الاختلافات بين useMemo وuseCallback، وسبب فائدتهما، وكيفية استخدامها بفعالية في مشاريعك.

---

1. ما هو useMemo؟

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

• بناء الجملة

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

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

استيراد React، { useMemo } من 'react'؛ مثال الدالة({ العناصر }) { مجموع ثابت = useMemo(() => { إرجاع العناصر. تقليل ((acc، item) => acc item.price, 0); }، [أغراض])؛ إرجاع ; }

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

هنا،

useMemo لن يقوم بإعادة حساب الإجمالي إلا عندما تتغير العناصر، مما يوفر الموارد إذا كانت العناصر ثابتة أو نادرًا ما يتم تحديثها.

---

1. ما هو useCallback؟

يتم استخدام الخطاف

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

• بناء الجملة

const memoizedCallback = useCallback(() => { doSomething(أ، ب)؛ }، [أ، ب])؛

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

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

استيراد React، { useCallback } من 'react'؛ الدالة ParentComponent() { const HandleClick = useCallback(() => { console.log("تم النقر على الزر!"); }, []); return ; }

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

هنا،

useCallback يضمن بقاء HandleClick على نفس مثيل الوظيفة ما لم تتغير التبعيات، مما يساعد على منع عمليات إعادة العرض غير الضرورية في ChildComponent.

---

3. مقارنة useMemo وuseCallback

الوجبات الجاهزة الرئيسية

يعد
• useMemo مفيدًا عندما تريد تخزين نتيجة لعملية حسابية. يعد
useCallback
• مفيدًا عندما تريد التخزين المؤقت لوظيفة لتجنب إعادة إنشائها.

---

4. متى تستخدم كل خطاف؟

معرفة متى تستخدم

useMemo

وuseCallback تأتي لفهم متطلبات أداء المكون الخاص بك وما إذا كان الحفظ سيحدث فرقًا ملحوظًا.

استخدم مذكرة الاستخدام:

عندما يكون لديك عملية حسابية باهظة الثمن ولا تحتاج إلى إعادة تشغيلها في كل عرض.

• عند حفظ البيانات المشتقة يمكن أن يساعد في تقليل العمليات الحسابية، مثل تجميع البيانات في قوائم كبيرة أو إجراء عمليات رياضية.

استخدم رد الاتصال:

عند تمرير دالة كدعم لمكون فرعي يعتمد على المساواة المرجعية.

• لمنع إعادة إنشاء الوظائف دون داعٍ، خاصة في المكونات عالية التردد.

---

5. الأخطاء الشائعة وأفضل الممارسات

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

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

إساءة استخدام useMemo وuseCallback
تذكر: يقوم useMemo بتخزين القيم مؤقتًا، ووظائف useCallback للتخزين المؤقت. يمكن أن يؤدي استخدام الرابط الخاطئ إلى سلوكيات وأخطاء غير متوقعة.

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

---

خاتمة

يعد كل من

useMemo

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