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