فهم واجهة المستخدم الخاصة بك كشجرة

تتخذ تطبيق React الخاص بك شكلاً مع العديد من المكونات المتداخلة داخل بعضها البعض. كيف يتتبع React هيكل مكونات تطبيقك؟

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

واجهة المستخدم الخاصة بك كشجرة

الأشجار هي نموذج للعلاقة بين العناصر. غالبًا ما يتم تمثيل واجهة المستخدم باستخدام هياكل شجرية. على سبيل المثال، تستخدم المتصفحات هياكل شجرية لنمذجة HTML (DOM) وCSS (CSSOM). كما تستخدم المنصات المحمولة الأشجار لتمثيل تسلسل عرضها الهرمي.

تقوم React بإنشاء شجرة واجهة مستخدم من مكوناتك. في هذا المثال، تُستخدم شجرة واجهة المستخدم بعد ذلك للتصيير إلى DOM.

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

شجرة التصيير

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

عندما نقوم بتصيير تطبيق React، يمكننا نمذجة هذه العلاقة في شجرة، تُعرف باسم شجرة التصيير.

إليك تطبيق React يقوم بتصيير اقتباسات ملهمة.

تقوم React بإنشاءشجرة تصيير، وهي شجرة واجهة مستخدم، مكونة من المكونات المصيرة.

من تطبيق المثال، يمكننا بناء شجرة التصيير أعلاه.

تتكون الشجرة من عقد، تمثل كل منها مكونًا.App،FancyText،Copyright، على سبيل المثال لا الحصر، كلها عقد في شجرتنا.

العقدة الجذرية في شجرة تصيير React هيالمكون الجذريللتطبيق. في هذه الحالة، المكون الجذري هوAppوهو أول مكون تقوم React بتصييره. يشير كل سهم في الشجرة من مكون أصل إلى مكون فرعي.

تمثل شجرة التصيير تمريرة تصيير واحدة لتطبيق React. معالتصيير الشرطي، قد يُصيِّر المكون الأب مكونات فرعية مختلفة اعتمادًا على البيانات المُمرَّرة.

يمكننا تحديث التطبيق لتصيير اقتباس ملهم أو لون بشكل شرطي.

مع التصيير الشرطي، عبر عمليات التصيير المختلفة، قد تُصيِّر شجرة التصيير مكونات مختلفة.

في هذا المثال، اعتمادًا على ما هوinspiration.type، قد نُصيِّر<FancyText>أو<Color>. قد تكون شجرة التصيير مختلفة لكل تمريرة تصيير.

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

تحديد هذه الفئات من المكونات مفيد لفهم تدفق البيانات وأداء تطبيقك.

شجرة تبعية الوحدات

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

كل عقدة في شجرة تبعية الوحدات هي وحدة وكل فرع يمثل جملةimportفي تلك الوحدة.

إذا أخذنا تطبيق Inspirations السابق، يمكننا بناء شجرة تبعية الوحدات، أو شجرة التبعية للإختصار.

شجرة تبعية الوحدات النمطية لتطبيق Inspirations.

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

بالمقارنة مع شجرة التصيير لنفس التطبيق، هناك هياكل متشابهة ولكن مع بعض الاختلافات الملحوظة:

• العُقد التي تشكل الشجرة تمثل وحدات نمطية، وليست مكونات.
• الوحدات النمطية غير المكونة، مثلinspirations.js، ممثلة أيضًا في هذه الشجرة. شجرة التصيير تحتوي فقط على المكونات.
• Copyright.jsيظهر تحتApp.jsولكن في شجرة التصيير، يظهرCopyright، المكون، كفرع تابع لـInspirationGenerator. هذا لأنInspirationGeneratorيقبل JSX كـخاصية children، لذا فهو يُصيِّرCopyrightكمكون فرعي ولكنه لا يستورد الوحدة النمطية.

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

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

ملخص

• الأشجار هي طريقة شائعة لتمثيل العلاقة بين الكيانات. غالبًا ما تُستخدم لنمذجة واجهة المستخدم.
• شجرة التصيير تمثل العلاقة المتداخلة بين مكونات React عبر عملية تصيير واحدة.
• مع التصيير الشرطي، قد تتغير شجرة التصيير عبر عمليات تصيير مختلفة. مع قيم خصائص مختلفة، قد تُصيِّر المكونات مكونات فرعية مختلفة.
• شجرة التصيير تساعد في تحديد المكونات عالية المستوى والمكونات الطرفية. المكونات عالية المستوى تؤثر على أداء التصيير لجميع المكونات تحتها والمكونات الطرفية غالبًا ما يتم إعادة تصييرها بشكل متكرر. تحديدها مفيد لفهم وتصحيح أداء التصيير.
• شجرة التبعية تمثل تبعيات الوحدات النمطية في تطبيق React.
• أدوات البناء تستخدم أشجار التبعية لتجميع الكود اللازم لإرسال التطبيق.
• شجر التبعية مفيدة لتصحيح أخطاء الأحجام الكبيرة للحزم التي تبطئ وقت الرسم وكشف فرص تحسين الكود الذي يتم تجميعه.