...

/

استخدام متقدم: البيانات المستمرة ومنع إعادة العرض

استخدام متقدم: البيانات المستمرة ومنع إعادة العرض

تعرف على كيفية تمكين useRef للتخزين الدائم القابل للتغيير والذي ينجو من عمليات إعادة العرض دون التسبب فيها.

سنغطي ما يلي...

في تطبيقات React المعقدة، غالبًا ما نحتاج إلى إدارة القيم التي لا ينبغي أن تُفعّل عمليات إعادة التصيير أو تتبّع المعلومات عبر عمليات التصيير - وهي قيم تقع خارج حالة واجهة المستخدم. عندما نُخزّن هذه البيانات فيuseState كل تحديث يفرض عرضًا، حتى لو لم تعتمد عليه واجهة المستخدم. قد يؤدي هذا إلى عمل غير ضروري، أو رسوم متحركة متقطعة، أو حالات تسابق في الكود غير متزامن . وهنا يأتي دورuseRef يلمع.

الuseRef خطاف

الuseRef يوفر Hook حاوية مستقرة ومستمرة تتيح لنا تخزين البيانات القابلة للتغيير أو مراجع DOM دون إعادة عرض المكون.

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

بناء الجملة

const refContainer = useRef(initialValue);

الخصائص الرئيسية

  • مستمر:.current تظل الخاصية هي نفس الكائن عبر العروض. ...