أنواع مكونات ReactJs في البرمجة

ما هي المكونات في ReactJs؟

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

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

أنواع مكونات ReactJs في البرمجة

1. المكون الوظيفي

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

 // Functional Component Example import React from 'react'; const HelloWorld = () => { return ( <div> <p>Hello Emizen!</p> </div> ) } export default HelloEmizen;

في صورة الكود أعلاه ، هو مكون بسيط يحمل المتغير الثابت "Hello Emizen". يتم تعيين المتغير الثابت إلى دالة السهم التي تُرجع JSX. لا تتطلب المكونات الوظيفية أن تكون وظيفة سهم ويمكن أيضًا الإعلان عنها ببساطة باستخدام وظائف JavaScript العادية. في الوقت نفسه ، يمكن أيضًا تمرير Props إلى الوظيفة وبالتالي استخدامها لعرض البيانات في كود JSX.

2. مكون فئة

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

 // مكون فئة مثالimport رد فعل من 'رد فعل' ؛ الصنف HelloWorld يمتد React.Component {
   يجعل() {
      إرجاع (
         <div>
            <p> مرحبًا Emizen! </p>
         </div>
      )
   }
} التصدير الافتراضي HelloEmizen؛

يمكن ملاحظة في المثال أعلاه أن مكون الصنف يستخدم extends React.Component بعد الصنف Hello Emizen . بعد ذلك ، يتطلب أيضًا طريقة العرض render() لإرجاع كود JSX. في مكون الصنف ، يمكن للمرء أن يعلن عن حالة ، ويضبطها على كائن جافا سكريبت ، ويستخدم props ليكون في المرحلة الأولية ويغير الحالة في عمليات دورة الحياة. سيتطلب React Hooks تنفيذ هذه الإجراءات بواسطة مكون وظيفي.

3. مكون نقي

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

يتمثل الاختلاف الكبير بين React.Component و React.PureComponent في أن المكون النقي يُظهر مقارنة ضحلة عند تغيير الحالة. تقوم المكونات الصافية تلقائيًا بإدارة shouldComponentUpdate() .

يتم إعادة عرض مكونات React غالبًا عندما:

• يتم setState()
• forceUpdate()
• يتم تحديث قيم props

4. مكونات ذات ترتيب أعلى

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

 // HOC Example import React from 'react'; import MyComponent from './components/MyComponent'; class HelloEmizen extends React.Component { render() { return( <div> {this.props.myArray.map((element) => ( <MyComponent data={element} key={element.key} /> ))} </div> ) } } export default HelloEmizen;

تحتوي صورة الكود أعلاه على مكون بسيط لوصف المكون ذي المستوى الأعلى. هنا رمز المفتاح هو this.props.myArray.map((element) => (<MyComponent />) . تُرجع هذه الوظيفة المكونات. يعتمد عدد المكونات ببساطة على عدد العناصر في المصفوفة التي تسمى HOC تأخذ الدالة مصفوفة من الحالة وبالتالي تعين كل عنصر في المصفوفة عن طريق تحويل كل عنصر إلى مكون React.

فيما يلي المتهدمة البسيطة لمكون الطلب الأعلى:

1. احصل على البيانات من الدعائم أو الحالة
2. ارسم الخريطة فوق المصفوفة وأعد مكون الوصول لكل عنصر.

كيف يتم عرض مكون ReactJs؟

يمكن اتباع الخطوات التالية لتصيير مكون ReactJS:

• بادئ ذي بدء ، يتم إنشاء فئة ES6 بنفس الاسم الذي يمتد إلى React.Component .
• تتم إضافة طريقة فارغة واحدة تُعرف باسم render() .
• يتم نقل جسم الوظيفة إلى طريقة العرض render() .
• استبدل props بـ this.props في جسم العرض render() .
• في النهاية ، احذف إعلان الوظيفة الفارغ المتبقي.

تفاعل مكونات التعشيش

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

• التصدير : عند تصدير وحدة أو ملف معين واستخدامه في وحدة نمطية أخرى ، يطلق عليه تصدير.
• استيراد : عند استيراد وحدة نمطية أو ملف معين واستخدامه في الوحدة النمطية الموجودة ، يطلق عليه استيراد.

تفاعل دورة حياة المكون

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

يحتوي أي مكون React أساسًا على المراحل الثلاث التالية:

1. تصاعد

بمجرد اكتمال تهيئة المكونات ، يتم بعد ذلك تثبيت المكون على DOM وعرضه على صفحة الويب. هنا ، تتبع React الإجراء الافتراضي فقط من أجل اصطلاحات تسمية الوظائف المحددة مسبقًا. الوظائف التي تحتوي على "سوف" تمثل قبل مرحلة معينة. وبالمثل ، فإن الوظيفة التي تحتوي على "فعلت" تمثل بعد الانتهاء من المرحلة. تتكون مرحلة تركيب المكونات من الوظيفتين التاليتين:

• componentWillMount () Function : يتم استدعاء هذه الوظيفة قبل تحميل المكون على DOM.
• componentDidMount () Function : مقابل الوظيفة السابقة ، يتم استدعاء هذه الوظيفة بعد تثبيت المكون على DOM.

2. التحديث

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

3. فك التركيب

إنها مرحلة إكمال دورة حياة المكون. في هذه المرحلة ، يتم فك المكونات من DOM. الوظيفة التالية هي العضو الوحيد في هذه الوظيفة:

ComponentWillUnmount () Function : يتم استدعاء الوظيفة قبل إلغاء تحميل المكون تمامًا من DOM. يحدث قبل إزالة المكون من الصفحة ، وبالتالي فإن هذا يتبرع بنهاية دورة الحياة.

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