في هذا الدرس 6تصفّح المواضيع
في البرمجة اليدوية التقليدية لشجرة المتصفح تكتب كوداً أمرياً (Imperative) يسرد على المتصفح تعليمات تفصيلية متتابعة: ابحث عن العنصر الفلاني، واحذف منه الكلاس القديم، وأضف الكلاس الجديد، ثم غيّر نص الزر. ومع تزايد حالات الشاشة تتشابك هذه الأوامر وتظهر أعطال نسيان تحديث بعض العناصر.
تقلب React هذه المعادلة إلى البرمجة التصريحية (Declarative UI)؛ فبدلاً من ملاحقة خطوات التغيير اليدوية، تصرّح فقط بالشكل النهائي المطلوب للواجهة في كل حالة، وتتكفل React بمطابقة المتصفح مع وصفك بدقة.
function SeatStatus() {
const seatsLeft = 4;
return (
<div className="seat-card">
<h3>Bootcamp Cohort Status</h3>
<p>{seatsLeft > 0 ? 'Enrollment Open' : 'Cohort Full'}</p>
</div>
);
}يلخص مهندسو الواجهات فلسفة React في المعادلة الشهيرة UI = f(data)؛ أي أن الواجهة ما هي إلا ناتج استدعاء دالة تستقبل البيانات الحالية وتعيد مخطط العناصر المقابل لها. وكلما تغيرت البيانات لاحقاً، استدعت React دالتك مجدداً لتحصل على المخطط المحدث وتعرضه بسلاسة.
function LessonMetric() {
const metric = { track: 'ReactJS', total: 51, completed: 2 };
const remaining = metric.total - metric.completed;
return (
<section>
<h3>{metric.track} Progress</h3>
<p>Remaining lessons: {remaining}</p>
</section>
);
}قبل كتابة سطر كود واحد لأي شاشة جديدة، انظر إلى التصميم البصري وارسم مستطيلات ذهنية حول كل منطقة مستقلة الوظيفة؛ فصفحة المنصة التعليمية تنقسم طبيعياً إلى شريط علوي Navbar، ومنطقة محتوى وسطى CourseCatalog تضم بداخلها بطاقات متكررة CourseCard، وتذييل سفلي SiteFooter. تشكل هذه العلاقة الهرمية شجرة المكونات (Component Tree).
لنطبّق عملياً بناء شجرة مكونات متدرجة حقيقية: مكون جذري App يجمع بداخله رأس الصفحة PortalHeader وملخص الموديول ModuleSummary والتذييل PortalFooter. لاحظ كيف يُقرأ المكون الجذري بوضوح تام كفهرس منظم للصفحة:
function PortalHeader() {
return <header><h2>CloseTag Academy</h2></header>;
}
function ModuleSummary() {
return <article><p>Module 1: React Foundations</p></article>;
}
function App() {
return <div><PortalHeader /><ModuleSummary /></div>;
}أثناء عملية المطابقة (Reconciliation)، يقارن محرك Fiber الداخلي في React شجرة الكائنات الجديدة بالشجرة السابقة المحفوظة لديه. فإذا تغيّر رقم واحد فقط داخل بطاقة من 4 إلى 3، تترك React الرأس والإطار وموضع التمرير وحقول الإدخال المحيطة دون أي مساس، وتحدّث ذلك النص الجزئي وحده.
في هندسة React المعاصرة، يُكتب كل مكون جديد كدالة قياسية واضحة المدخلات والمخرجات. راجع الجدول المقارن التالي لترسيخ الفارق بين التعديل الأمري اليدوي والمعمارية التصريحية للمكونات:
| المعيار الهندسي | التعديل الأمري اليدوي لـ DOM | المعمارية التصريحية في React |
|---|---|---|
| تركيز المطور | كتابة أوامر البحث والتعديل اليدوي لكل عنصر | وصف شكل الواجهة المطلوب لكل حالة بيانات |
| تنظيم الواجهة | ملفات سكريبت طويلة مرتبطة بمعرفات متفرقة | شجرة هرمية من المكونات الدالية المستقلة |
| كفاءة تحديث المتصفح | خطر إعادة بناء كتل كاملة عبر innerHTML | تحديث جراحي دقيق للعقد المتغيرة فقط |
| التوسع في المشاريع الكبيرة | صعوبة بالغة في منع تضارب حالات العناصر | حدود واضحة ومسؤولية مستقلة لكل مكون |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
قارنت في هذا الدرس بين التعديل الأمري اليدوي والوصف التصريحي في React، واستوعبت معادلة الواجهة كدالة للبيانات، وتعلمت تفكيك الشاشات إلى شجرة مكونات هرمية وآلية المطابقة الذكية. الخطوة التالية: انتقل الآن إلى الدرس رقم 3 «إنشاء مشروع React حديث باستخدام أداة Vite» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Imperative Programming البرمجة الأمرية
- كتابة تعليمات متسلسلة تخبر المتصفح خطوة بخطوة كيف يبحث عن كل عنصر ويعدل خصائصه يدوياً.
- للمراجعة
- 02 Component Tree شجرة المكونات
- الهيكل الهرمي الذي يبدأ بالمكون الجذري App ويتفرع إلى مكونات أب وأبناء تمثل أقسام الصفحة.
- للمراجعة
- 03 React Element عنصر React الافتراضي
- كائن JavaScript خفيف الوزن يصف ما يجب أن يظهر على الشاشة قبل تطبيقه فعلياً على المتصفح.
- للمراجعة
- 04 Root Component المكون الجذري
- المكون الأعلى في قمة شجرة التطبيق والذي يُسمى عرفاً App وتندرج تحته سائر مكونات الواجهة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- النموذج الشجري الحي لعناصر صفحة الويب داخل ذاكرة المتصفح.
- للمراجعة
- 02 VDOM VDOM
- Virtual Document Object Model
- التمثيل الافتراضي الخفيف للواجهة في الذاكرة لحساب الفروق بدقة قبل تعديل المتصفح.
- للمراجعة
- 03 UI UI
- User Interface
- المخرج البصري التفاعلي الناتج عن تمرير البيانات لدوال المكونات.
- للمراجعة
- 04 ES6 ES6
- ECMAScript 2015
- الإصدار القياسي الحديث للغة JavaScript المعتمد في كتابة دوال ووحدات React.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال شجرة المكونات في محرر التجريب وأنشئ دالة PortalFooter تعيد عنصر footer ثم أدرجها داخل المكون App.
-
تنقل بين الحالات الثلاث في المختبر لمقارنة خطوات DOM اليدوية بمعادلة الواجهة التصريحية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما الفارق الجوهري بين كود DOM الأمري والكود التصريحي في React؟
يصف الكود التصريحي الشكل المطلوب للواجهة بينما تتولى React خطوات تحديث عناصر DOM.
ماذا تعبّر المعادلة الهندسية UI = f(data) في فلسفة React؟
تعني أن الواجهة المعروضة هي الناتج المباشر لتمرير البيانات الحالية إلى دوال المكونات.
يساعد تقسيم الشاشة المعقدة إلى مكونات صغيرة مستقلة على تسهيل الاختبار والصيانة وإعادة الاستخدام.
صواب؛ إذ يحدد كل مكون مسؤوليته بوضوح مما يرفع جودة الصيانة والعمل الجماعي.
إذا عرض المكون <App /> كلاً من <Navbar /> و<Footer /> بداخله، فما العلاقة بين Navbar وFooter في الشجرة؟
المكونان اللذان يشتركان في نفس المكون الأب المباشر يُسميان مكونين شقيقين Siblings.
عند تغير رقم واحد داخل مكون فرعي، تحذف React مستند HTML بالكامل وتعيد بناءه من الصفر.
خطأ؛ فآلية المطابقة الذكية تحدد الفارق بدقة وتعدّل العقدة النصية المتغيرة فقط دون المساس ببقية الشجرة.
لماذا يُعد إنشاء عناصر React الافتراضية في الذاكرة أسرع بكثير من إنشاء عقد DOM حقيقية؟
لأن عناصر React مجرد كائنات JavaScript خفيفة لا تحمل عبء حسابات التخطيط والرسم الثقيلة في المتصفح.
بأي أسلوب يجب كتابة جميع المكونات الجديدة وفق معيار react.dev الحديث؟
تُكتب جميع المكونات الجديدة في React الحديثة كدوال JavaScript قياسية مع الخطافات Hooks.
ما الاسم القياسي المتعارف عليه للمكون الجذري الأعلى في أغلب مشاريع React؟
جرت العادة القياسية في مشاريع React على تسمية المكون الجذري الأعلى بالاسم App.
يزداد تعقيد صيانة كود DOM الأمري اليدوي كلما تعددت حالات الواجهة التفاعلية وتشابكت.
صواب؛ فتتبع الانتقالات اليدوية بين عشرات الحالات المتداخلة يرفع احتمالية نسيان تحديث بعض العناصر.
ما اسم محرك المطابقة الداخلي المعتمد في الإصدارات الحديثة من React؟
يُعرف محرك المطابقة وجدولة التحديثات الداخلي في React الحديثة باسم محرك Fiber.