Component Tree شجرة المكوّنات
آخر تحديث: 2026-11-03
Component Tree شجرة المكوّنات
تتكوّن تطبيقات React من مكوّنات متداخلة تشكّل شجرة: المكوّن الجذر في الأعلى، وتذهب الأبناء إلى عمق أكبر. تتدفق البيانات في اتجاه واحد نزولاً عبر الشجرة بواسطة props، وفهم شكل الشجرة يساعدك على تخطيط حجم تقسيم المكوّنات ومكان وضع الحالة. والشجرة هي أيضاً الخريطة التي ترج إليها حين يجب أن تتشارك عدة مكوّنات القيمة نفسها.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
<App> ← المكوّن الجذر
<Header /> ← مكوّن ابن
<TodoList>
<TodoItem /> ← مستوى أعمق؛ تمرّ البيانات عبر props من الأعلى إلى الأسفل
</TodoList>
</App>القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
يظهر عنوان المكوّن الجذر في الأعلى، تليه لوحتان بإطار (Today / Tomorrow)، تعرض كل منهما مهامها في صفوف — أي المستويات الثلاثة بالضبط: مكوّن جذر ← لوحة ← صف.💡 النقاط الأساسية
ℹ️ ملاحظة شجرة المكوّنات تصف علاقات التركيب، وشجرة DOM تصف عناصر الصفحة؛ والاثنتان متشابهتان لكنهما ليسا الشيء نفسه.
💡 نصيحة حين تشترك عدة مكوّنات في البيانات نفسها، ارفع الحالة إلى أقرب أب مشترك بينها ثم وزّعها عبر props.
⚠️ تحذير التسلسلات العميقة تجعل تمرير الـ props عبر المستويات طويلاً ومشوّشاً؛ استخدم Context أو مكتبة حالة حين تعبر البيانات عدة مستويات.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل شجرة مكوّنات React هي نفسها شجرة DOM؟
ج لا. شجرة المكوّنات هي بنية التركيب في JSX، بينما شجرة DOM تضمّ العقد الحقيقية داخل المتصفح؛ وقد يعرض المكوّن الواحد صفراً أو واحداً أو عدة عقد DOM.
س في أي مستوى من شجرة المكوّنات تضع الحالة؟
ج ضعها على أقرب أب مشترك للمكوّنات التي تحتاجها، واحتفظ بالتفاصيل التي تخصّ مكوّناً واحداً داخل ذلك المكوّن، تفادياً للرفع الزائد.
س كيف أتجنّب أن تصبح شجرة المكوّنات عميقة جداً؟
ج فضّل التركيب (children) على طبقات من الأغلفة، واستخدم Context للبيانات الثابتة عبر مستويات كثيرة، واترك تحسينات العرض إلى memo بدل ضبط التسلسل يدوياً.
