...
/تحسين عمليات إعادة العرض باستخدام useCallback وuseMemo
تحسين عمليات إعادة العرض باستخدام useCallback وuseMemo
اكتشف كيف تساعد useCallback وuseMemo في منع عمليات إعادة العرض غير الضرورية، مما يحافظ على سرعة المكونات وكفاءتها.
سنغطي ما يلي...
مع نمو تطبيقات React ، قد نلاحظ أن تحديث جزء صغير من واجهة المستخدم قد يؤدي أحيانًا إلى إعادة تصيير غير ضرورية لمكونات أخرى. حتى لو بدت إخراج متطابقة، يُعيد React تصيير المكونات الفرعية لأنه يتم إنشاء مراجع جديدة للوظائف أو الكائنات في كل تصيير.
لمعالجة هذه المشكلة، يوفر React خطافين للأداء،useCallback وuseMemo ، الذي يسمح لنا بالتحكم في وقت إعادة إنشاء القيم والوظائف.
الuseCallback وuseMemo خطافات
ينتمي كلا الخطافين إلى نفس العائلة؛ حيث يقومان بتخزين النتائج بين عمليات العرض لتجنب إعادة الحساب أو إعادة الإنشاء .
فهمuseCallback
الuseCallback يُخزِّن الخطاف دالةً ، ويُعيد نفس المثيل بين عمليات العرض ما لم تتغير تبعياتها. يُساعد هذا على منع عمليات إعادة العرض غير الضرورية في المكونات الفرعية المُخزَّنة التي تعتمد على خصائص رد نداء . يُستخدم غالبًا معReact.memo أوuseMemo لتحسين المكونات المتداخلة بعمق.
بناء الجملة
const memoizedCallback = useCallback(callbackFunction, dependencyArray);
حدود:
callbackFunction: الوظيفة التي نريد حفظها.dependencyArray: قائمة التبعيات التي تؤدي إلى إنشاء مرجع وظيفة جديد عند تغييرها. ...