تابع شرح تعلم React الجزء 4

تعلم رياكت

 -22كيف يتم إنشاء النماذج في React؟

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

يقدم React نهجا تفاعليا وتفاعليا لبناء نموذج. تشبه النماذج في React نماذج HTML. ولكن في React ، يتم تحديث خاصية الحالة للمكون فقط عبر setState() ، وتعالج وظيفة JavaScript إرسالها. تتمتع هذه الوظيفة بإمكانية الوصول الكامل إلى البيانات التي يدخلها المستخدم في نموذج.

import React, { Component } from 'react'; 

class App extends React.Component { 

  constructor(props) { 

      super(props); 

      this.state = {value: ''}; 

      this.handleChange = this.handleChange.bind(this); 

      this.handleSubmit = this.handleSubmit.bind(this); 

  } 

  handleChange(event) { 

      this.setState({value: event.target.value}); 

  } 

  handleSubmit(event) { 

      alert('You have submitted the input successfully: ' + this.state.value); 

      event.preventDefault(); 

  } 

  render() { 

      return ( 

          <form onSubmit={this.handleSubmit}> 

            <h1>Controlled Form Example</h1> 

            <label> 

                Name: 

                <input type="text" value={this.state.value} onChange={this.handleChange} /> 

            </label> 

            <input type="submit" value="Submit" /> 

         </form> 

      ); 

  } 

} 

export default App;

 -23ما هي المراحل المختلفة لدورة حياة مكون React؟

المراحل المختلفة لدورة حياة مكون React هي:

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

مرحلة التركيب: في هذه المرحلة ، يتم إنشاء مثيل المكون وإضافته إلى DOM.

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

مرحلة إلغاء التثبيت: إنها المرحلة الأخيرة من دورة حياة React ، حيث يتم إتلاف مثيل المكون وإلغاء تركيبه (إزالته) من DOM.

 -24ما هي المكونات النقية؟

مكونات نقية مقدمة في الإصدار 15.3 من React. يختلف المكونان React.Component و React.PureComponent في طريقة دورة حياة React () shouldComponentUpdate (). تقرر هذه الطريقة إعادة عرض المكون عن طريق إرجاع قيمة منطقية (صواب أو خطأ). في React.Component ، تُرجع طريقة shouldComponentUpdate () القيمة true افتراضيًا. لكن في React.PureComponent ، يقارن التغييرات في الحالة أو الدعائم لإعادة تصيير المكون. يعزز المكون النقي بساطة الكود وأداء التطبيق.

 -25 ما هي مكونات الرتبة العليا (HOC)؟

في React ، يعد مكون الترتيب الأعلى أسلوبًا متقدمًا لإعادة استخدام منطق المكون. إنها وظيفة تأخذ مكونًا وتعيد مكونًا جديدًا. بمعنى آخر ، إنها وظيفة تقبل وظيفة أخرى كوسيطة. وفقًا للموقع الرسمي ، فهي ليست الميزة (جزء) في React API ، ولكنها نمط ينبثق من الطبيعة التركيبية لـ React.

 -26 ماذا يمكنك أن تفعل مع HOC؟

يمكنك القيام بالعديد من المهام مع HOC ، وبعضها مذكور أدناه:

• قبلية إعادة استخدام الكود
•  الدعائم التلاعب
•  تلاعب الدولة
•  تقديم سرقة

 -27كيف تكتب تعليقات في React؟

في React ، يمكننا كتابة التعليقات أثناء كتابة التعليقات في JavaScript. يمكن أن يكون بطريقتين:

1.تعليقات سطر واحد: يمكننا كتابة التعليقات كـ / * تعليقات مجمعة * / بأقواس متعرجة:

1.   {/* تعليق سطر واحد */}  

2. التعليقات متعددة الأسطر: إذا أردنا التعليق على أكثر من سطر واحد ، فيمكننا القيام بذلك

1.   { /*  

2.      تعليق 

3.      متعدد 

4.      الاسطر 

5.   */ }