مكونات التفاعل - الدعائم والحالات في ReactJS مع أمثلة

'في React ، كل شيء مكون'

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

• ما هي مكونات React؟
• مزايا مكونات React
• الدعائم
• تنص على
• الدول مقابل الدعائم
• تفاعل دورة حياة المكون

ما هي مكونات React؟

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

دعونا نفهم الآن ما هي هذه المكونات.

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

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

نحن نستخدم React.createClass () طريقة لإنشاء مكون. يجب تمرير وسيط الكائن إلى هذا التابع والذي سيحدد مكون React. يجب أن يحتوي كل مكون على واحد بالضبط يجعل() طريقة. إنها الخاصية الأكثر أهمية للمكون المسؤول عن تحليل HTML في JavaScript ، JSX. هذه يجعل() سيعيد تمثيل HTML للمكون كعقدة DOM. لذلك ، يجب وضع جميع علامات HTML في علامة تضمين داخل ملف يجعل() .

فيما يلي نموذج التعليمات البرمجية لإنشاء مكون.

كيفية الإدلاء بمضاعفة كثافة العمليات

استيراد React من 'رد فعل' استيراد ReactDOM من فئة 'التفاعلية dom' MyComponent يمتد React.Component {render () {return (
هويتك هي {this.state.id}
)}} ReactDOM.render (، document.getElementById ('content'))

الدول مقابل الدعائم

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

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

1. المرحلة الأولى
2. مرحلة التحديث
3. مرحلة تغيير الدعائم
4. مرحلة الفك

تحتوي كل مرحلة من هذه المراحل على بعض طرق دورة الحياة الخاصة بها فقط. فلنكتشف الآن ما يحدث خلال كل مرحلة من هذه المراحل.

أ. المرحلة الأولى - المرحلة الأولى من دورة حياة مكون React هي المرحلة الأولية أو مرحلة العرض الأولية. في هذه المرحلة ،المكون على وشك أن يبدأ رحلته ويشق طريقه إلى DOM. تتكون هذه المرحلة من الطرق التالية التي يتم استدعاؤها بترتيب محدد مسبقًا.

1. getDefaultProps (): تستخدم هذه الطريقة لتحديد القيمة الافتراضية لـ هذه الدعائم . يتم استدعاؤه قبل إنشاء المكون الخاص بك أو تمرير أي دعائم من الأصل إليه.
2. getInitialState (): تستخدم هذه الطريقة لحدد القيمة الافتراضية لـ هذه.الولاية قبل إنشاء المكون الخاص بك.
3. componentWillMount (): هذه هي الطريقة الأخيرة التي يمكنك استدعاءها قبل تحويل المكون الخاص بك إلى DOM. ولكن إذا اتصلت setState () داخل هذه الطريقة لن يعيد المكون الخاص بك تصيير.
4. يجعل(): العاشر هي طريقة مسؤولة عن إرجاع عقدة HTML جذرية واحدة ويجب تحديدها في كل مكون. يمكنك العودة لا شيء أو خاطئة في حالة عدم رغبتك في تقديم أي شيء.
5. componentDidMount (): بمجرد تقديم المكون ووضعه على DOM ، يتم ذلك طريقة تسمى. هنا يمكنك تنفيذ أي عمليات استعلام DOM.

ب. مرحلة التحديث - بمجرد إضافة المكون إلى DOM ، يمكنهم التحديث وإعادة العرض فقط عند حدوث تغيير في الحالة. في كل مرة تتغير الحالة ، يستدعي المكون اسمها يجعل() مرة أخرى. أي مكون يعتمد على إخراج هذا المكون سوف يستدعي أيضًا يجعل() مرة أخرى. يتم ذلك للتأكد من أن المكون الخاص بنا يعرض أحدث إصدار من نفسه. وبالتالي ، لتحديث المكونات بنجاح ، يتم استدعاء الطرق التالية بالترتيب المحدد:

1. shouldComponentUpdate (): باستخدام هذه الطريقة ، يمكنك التحكم في سلوك المكون الخاص بك في تحديث نفسه. إذا قمت بإرجاع صحيح من هذه الطريقة ،سيتم تحديث المكون. وإلا إذا كانت هذه الطريقة ترجع ملفخاطئة، سيتخطى المكون التحديث.
2. المكونWillUpdate (): تيطريقته تسمى يقبل أن يتم تحديث المكون الخاص بك. في هذه الطريقة ، لا يمكنك تغيير حالة المكون عن طريق الاتصال this.setState .
3. يجعل(): إذا كنت تعيد خطأ عبر shouldComponentUpdate () ، الكود بالداخل يجعل() سيتم استدعاءه مرة أخرى للتأكد من أن المكون الخاص بك يعرض نفسه بشكل صحيح.
4. componentDidUpdate (): بمجرد تحديث المكون وتقديمه ، يتم استدعاء هذه الطريقة. يمكنك وضع أي كود داخل هذه الطريقة ، والتي تريد تنفيذها بمجرد تحديث المكون.

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

1. componentWillReceiveProps (): تُرجع هذه الطريقة وسيطة واحدة تحتوي على قيمة الخاصية الجديدة التي على وشك تخصيصها للمكون.
   تتصرف بقية طرق دورة الحياة بشكل مماثل للطرق التي رأيناها في المرحلة السابقة.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. يجعل()
5. componentDidUpdate ()

د.مرحلة فك التركيب -هذه هي المرحلة الأخيرة من دورة حياة المكونات التي يتم فيها تدمير المكون وإزالته من DOM تمامًا. يحتوي على طريقة واحدة فقط:

1. ComponentWillUnmount (): بمجرد استدعاء هذه الطريقة ، تتم إزالة المكون الخاص بك من DOM بشكل دائم.بهذه الطريقة ، صيمكنك إجراء أي مهام متعلقة بالتنظيف مثل إزالة مستمعي الأحداث وإيقاف المؤقتات وما إلى ذلك.

فيما يلي مخطط دورة الحياة بالكامل:

يقودنا هذا إلى نهاية مدونة React Components. آمل أن أكون قادرًا في هذه المدونة على شرح ماهية مكونات React وكيفية استخدامها. يمكنك الرجوع إلى مدونتي على ، في حال كنت تريد معرفة المزيد عن ReactJS.

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

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات وسنعاود الاتصال بك.