حفظ القيم من دون إعادة التصيير
احتفظ بقيم قابلة للتغيير بين عمليات التصيير من دون التسبب في إعادة تصيير؛ وقارن بين useRef وuseState باستخدام عدادات بسيطة ومعرّف مؤقت.
حفظ القيم من دون إعادة التصيير درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا useRef؟
الهدف: تخزين قيم تستمر عبر عمليات إعادة التصيير من دون التسبب في تصيير جديد. يمنحك useRef حاوية مستقرة باسم .current.
- تستمر عبر عمليات التصيير
- لا تؤدي تغييراتها إلى إعادة التصيير
- مناسبة جدًا للمؤقتات والقيم السابقة
المرجع مقابل الحالة
تؤدي تحديثات useState إلى إعادة تصيير واجهة المستخدم، أما تحديثات useRef فلا تفعل ذلك. اختر ref للمساعدات القابلة للتغيير (المعرّفات والعدادات المستخدمة في المنطق)، لا لبيانات UI.
مثال: عدّاد التصيير باستخدام مرجع
نزيد renderCount في تأثير ونحتفظ به في مرجع؛ ويستمر عبر عمليات التصيير لكنه لا يؤدي إلى تشغيلها.
<div id="root"></div>
الاستخدامات المناسبة لـ useRef
الاستخدامات المناسبة:
- معرّفات المؤقتات والفواصل الزمنية
- ذاكرات التخزين المؤقت للقيم السابقة
- أعلام بين عمليات التصيير (مثل isMounted)
ليس مناسبًا للبيانات التي يجب أن تظهر في واجهة المستخدم.
مثال: معرّف المؤقت في مرجع
احتفظ بمعرّف الفاصل الزمني في مرجع كي نتمكن من بدء المؤقت وإيقافه دون عمليات تصيير إضافية.
<div id="root"></div>
أخطاء شائعة ونصائح
الأخطاء الشائعة:
- لا تقرأ مرجعًا للتحكم في واجهة المستخدم دون حالة — لن تتحدث الواجهة.
- أعد تهيئة المراجع عند إزالة المكوّن إذا كانت تحتفظ بمعرّفات أو موارد.
- تجنّب الإفراط في استخدام المراجع كحاويات عامة.
التحقق من مفهوم useRef
مراجعة
مراجعة: استخدم useRef للقيم القابلة للتغيير التي تستمر عبر عمليات التصيير، مثل المعرّفات أو القيم السابقة أو الأعلام، دون التسبب في إعادة تصيير. استخدم الحالة لواجهة المستخدم المرئية.
الأسئلة الشائعة
هل درس «حفظ القيم من دون إعادة التصيير» مجاني؟
نعم — نص درس «حفظ القيم من دون إعادة التصيير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «حفظ القيم من دون إعادة التصيير»؟
احتفظ بقيم قابلة للتغيير بين عمليات التصيير من دون التسبب في إعادة تصيير؛ وقارن بين useRef وuseState باستخدام عدادات بسيطة ومعرّف مؤقت. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «حفظ القيم من دون إعادة التصيير»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- حفظ القيم من دون إعادة التصيير
- الوصول إلى عقد DOM والقياس والتركيز
- المراجع القابلة للتغيير للمؤقتات والمعرّفات