الدرس 1 من 8
الحالة في مكان واحد
- 14 دقيقة
- 5 فحوص
- 3 تلميحات
- إلى المطلوب
هدف الدرس
تتغيّر الحالة فتتبعها الواجهة
الشرح
أكثر ما يُفسد الواجهات أن تعدّل الـ DOM من عشرة أماكن، فتضيف عنصرًا هنا وتحذف نصًّا هناك، ثم لا يعرف أحد ما الحالة الحقيقية للصفحة.
والبديل قاعدة واحدة: كائن واحد يحمل الحالة، ودالة واحدة ترسمها على الصفحة، فكل حدث يغيّر الحالة ثم يستدعي render()، ولا يعدّل الصفحة بنفسه أبدًا.
وهذه هي الفكرة التي تقوم عليها React وأمثالها، لكنها لا تحتاج إلى مكتبة، بل إلى الالتزام بالقاعدة.
المطلوب
اكتب الدالة render() لترسم state.items، واجعل الزرّ يضيف عنصرًا إلى الحالة ثم يعيد الرسم.
الفحوص
5 فحوص- القائمة تعرض العنصرين الموجودين في الحالة
- العدّاد يطابق عدد العناصر في الحالة
- الإضافة تزيد القائمة والعدّاد معًا
- الحالة نفسها تزيد لا الـ DOM وحده
- الدالة render معرَّفة ويمكن استدعاؤها وحدها