لماذا يصعب تحديث الواجهة يدويا؟

بطاقة تقدم الدورة تعرض الحالة و نسبة التقدم و زر Continue و رسالة الإكمال. عندما تكتمل الدورة نريد أن تعرض البطاقة Completed و 100%. و يجب أن يتعطل الزر و تظهر رسالة الإكمال.

افتح app.js في المحرر. قبل أن تجرب، توقع ما سيحدث إذا اخترت In progress ثم Completed. هل سيتعطل زر Continue؟

جرب بنفسك

لماذا بقي الزر متاحا؟

عندما نختار In progress يغير الكود النص و نسبة التقدم. كما يجعل الزر متاحا و يخفي رسالة الإكمال.

بعدها نختار Completed. يتغير النص و تصبح النسبة 100% و تظهر رسالة الإكمال، لكن الكود لا يعطل الزر. لذلك يبقى متاحا لأنه كان متاحا في الحالة السابقة.

السطر الناقص هو:

continueButton.disabled = true;

بعد إضافة هذا السطر تصبح البطاقة صحيحة في هذه الحالة. لكن المشكلة الأهم باقية. علينا أن نتذكر كل جزء يجب تغييره عند الانتقال إلى كل حالة. إذا نسينا أمرا واحدا قد تعرض البطاقة خليطا من حالتين. كما قد تختلف النتيجة حسب الحالة التي كانت معروضة قبلها.

نسمي هذا أسلوب الأوامر (Imperative). نخبر الصفحة خطوة بخطوة بأن تغير النص و تعطل الزر و تظهر الرسالة. كلما زاد عدد الحالات و العناصر زاد عدد الأوامر التي يجب أن تبقى متناسقة.

ماذا لو وصفنا النتيجة التي نريدها؟

لننظر إلى بيانات الدورة المكتملة:

{ status: "completed", progress: 100 }

قبل أن تقرأ المثال التالي، حدد ما الذي يجب أن تعرضه البطاقة لهذه البيانات. ما النص و النسبة؟ هل الزر معطل؟ هل تظهر رسالة الإكمال؟

مهما كانت الحالة المعروضة سابقا، يجب أن تؤدي هذه البيانات إلى النتيجة نفسها:

const completedView = {
  statusText: "Completed",
  progressText: "100%",
  continueDisabled: true,
  completeMessageHidden: false,
};

لا يلزم أن نكتب كائنا كهذا عند استخدام React. وضعناه هنا فقط لتوضيح الفرق في التفكير.

بدل أن نسأل "ما الأوامر التي تغير الصفحة الحالية؟" نسأل "كيف يجب أن تبدو الواجهة لهذه البيانات؟"

هذا هو أسلوب الوصف (Declarative). نصف النتيجة التي نريدها من البيانات الحالية بدل أن نعتمد على ما كان معروضا في الصفحة من قبل.

React مبني على هذه الفكرة. نستخدم JavaScript لوصف الواجهة التي نريدها من البيانات، ثم يتولى React تحديث DOM حتى يطابق هذا الوصف. هذا لا يعني أن DOM اختفى أو أن React لا يحدثه. الفرق هو أننا لا ندير هذه التحديثات واحدا واحدا بأنفسنا.

في الدرس التالي سنرى كيف نبدأ تطبيق React باستخدام Vite و نجعله يدير جزءا من الصفحة.

اختبر معلوماتك