متى ننقل المكون إلى ملف مستقل؟

في الدرس السابق قسمنا Dashboard إلى مكونات لها أدوار واضحة:

Dashboard
├── DashboardHeader
├── ProgressSummary
└── CourseList

ما زالت كلها في index.jsx. إذا نقلنا CourseList إلى ملف آخر، هل يتغير مكانها في الواجهة؟

نقل الكود لا ينقل المكون في الواجهة

يعرض Dashboard القائمة بهذا السطر:

<CourseList />

يمكننا نقل دالة CourseList إلى ملف آخر ثم استيرادها. ما دام السطر أعلاه في مكانه، تبقى القائمة في مكانها من الصفحة.

ما علاقة الملفات ببعضها؟

سننقل DashboardHeader و CourseList إلى dashboard-parts.jsx و نبقي ProgressSummary و course في index.jsx. عندما يستورد index.jsx من الملف الجديد، تنشأ علاقة بين الملفين. نسمي كل ملف وحدة (module) و نسمي الرسم الذي يتتبع علاقات import شجرة اعتماد الملفات (module dependency tree).

هذه الشجرة تجيب عن سؤال: من أي ملف يأتي الكود؟ أما شجرة العرض (render tree) فتجيب عن سؤال آخر: أي المكونات يعرضها Dashboard؟

كيف نصدر المكونات و نستوردها؟

في dashboard-parts.jsx نكتب export قبل DashboardHeader و export default قبل CourseList:

export function DashboardHeader() {
  // ...
}
 
export default function CourseList() {
  // ...
}

عند الاستيراد نضع اسم DashboardHeader داخل الأقواس المعقوفة لأنه تصدير بالاسم. و نكتب CourseList خارجها لأنه تصدير افتراضي:

import CourseList, { DashboardHeader } from "./dashboard-parts";

هاتان طريقتان في JavaScript. لا تشترط React إحداهما و لا تشترط ملفا مستقلا لكل مكون.

جرب نقل المكونات

ستجد dashboard-parts.jsx فارغا في المحرر. هل سيتغير شكل الصفحة إذا نقلت المكونين و أبقيت استخدامهما داخل Dashboard كما هو؟ توقع الإجابة قبل التعديل.

ابدأ شجرة اعتماد الملفات من index.jsx و شجرة العرض من Dashboard. بعد أن ترسمهما قارن رسمك بالإجابة.

index.jsx
└── dashboard-parts.jsx

Dashboard
├── DashboardHeader
├── ProgressSummary
└── CourseList

هل يكفي الاستيراد لعرض المكون؟

احذف <CourseList /> مؤقتا من Dashboard و أبق استيراد CourseList. توقع أي الشجرتين ستتغير ثم افتح المعاينة.

Dashboard
├── DashboardHeader
└── ProgressSummary

أعد <CourseList /> إلى مكانه قبل تشغيل الاختبارات.

متى ننقل مكونا إلى ملف آخر؟

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

في الدرس القادم سنمرر بيانات مختلفة إلى المكونات باستخدام Props بدلا من إنشاء مكون جديد لكل دورة.

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