دورة حياة مكون التفاعل: ما الذي تحتاج إلى معرفته [2022]
نشرت: 2021-01-06في React ، ينقسم التطبيق إلى أصغر أجزاء ممكنة تُعرف باسم المكونات. يمكن أن تكون المكونات عرضية أو حاوية.
عندما نتحدث عن مكونات العرض ، فليس لديهم منطق. يتم تضمينها داخل المكونات ؛ لديها فقط واجهة المستخدم.
مكونات الحاوية هي تلك التي تستخدم مكونات العرض ولها منطق الأعمال في المكون. غالبًا ما يتعين على هذه المكونات الاحتفاظ بأشياء الحالة المحلية لتحقيق واحدة من حالات الاستخدام العديدة التي قد تكون مسؤولة عنها. تستخدم هذه المكونات مكونات العرض كمكونات فرعية وتمرير البيانات باستخدام الدعائم المختلفة.
يتيح لك React أن يكون لديك فئة أو مكونات وظيفية. النمط السائد المستخدم في النظام البيئي للتفاعل هو أن المكون التقديمي هو نوع وظيفي للمكون ، ومكونات الحاوية هي نوع فئة.
توضح دورة حياة التفاعل العملية الدقيقة التي تمر من خلالها المكونات والسبب وراء دورة حياة مكون التفاعل .
جدول المحتويات
المكونات الوظيفية
هؤلاء ليس لديهم حالة ، ويتم فقط التلاعب باستخدام الدعائم.
لا يمكن استخدام كل طرق دورة حياة المكون أو الحالة setState أو الوصول إليها داخل هذه المكونات.
الخروج: رد فعل أفكار المشروع
مكونات الفصل
يمكن أن يكون لهذه المكونات حالة محلية ، ولها حق الوصول إلى أساليب دورة الحياة و setState .
يبدو مكون الفصل النموذجي في التفاعل كما يلي: - 
تتكون دورة حياة المكون من ثلاث مراحل: -
- تصاعد
- التحديث
- الفتح
تصاعد
عندما يتم إنشاء أي مكون وإدراجه في DOM (نموذج كائن المستند) ، فإن الطرق المستخدمة هي:
● المُنشئ ()
● getDerivedStateFromProps ثابتة ()
● تقديم ()
● componentDidMount ()
التحديث
عندما يتم تغيير الخاصية أو الحالة المزودة لمكون ما ، تُعرف إعادة تصيير المكون أيضًا بمرحلة التحديث. في هذه المرحلة ، فيما يلي طرق دورة الحياة التالية التي يتم استدعاؤها:
● getDerivedStateFromProps ثابتة ()
● shouldComponentUpdate ()
● تقديم ()
● getSnapshotBeforeUpdate ()
● componentDidUpdate ()
قراءة: Vue vs React: الفرق بين Vue و React
الفتح
تسمى هذه الطريقة أثناء فك أي مكون: -
● المكون willUnmount ()
إنها آخر وظيفة يتم استدعاؤها قبل إتلاف نموذج كائن المستند. إنه يعمل كتنظيف لأي عنصر تم إنشاؤه أثناء componentWillMount.
لغرض معالجة الخطأ في المكون ، هناك بعض الطرق المحجوزة: -
● getDerivedStateFromError ثابت ()
● componentDidCatch ()
طرق دورة الحياة شائعة الاستخدام موضحة بالتفصيل: -
● المُنشئ (الدعائم)
تُستخدم طريقة دورة الحياة هذه أثناء مرحلة تركيب المكونات. يمكن للمرء أن يكون لديه كائن حالة محلي معلن هنا. يتم استدعاء super (props) داخل المُنشئ قبل أي بيان آخر ؛ خلاف ذلك ، يحدث خطأ أثناء الوصول إلى this.props.
إذا كان المرء لا يهدف إلى التصريح عن كائن الحالة المحلية أو ربط معالج الحدث بالمثيل ، فلا داعي لكتابة طريقة دورة حياة المكونات.
لا يُنصح بحالة الاستدعاء في المُنشئ () لأنها ستؤدي إلى إعادة التصيير قبل انتهاء الدورة السابقة.
المُنشئ () هو المكان الوحيد الذي يمكن للمرء أن يعين فيه الدولة مباشرة. وإلا ، إذا كانت هناك حاجة لتغيير الحالة أو تخصيص شيء بداخلها ، فيجب استخدام this.setSate .
● تقديم ()
داخل مكونات هذه الطريقة ، يتم كتابة جزء JSX. JSX مشابه لـ HTML ولكنه بناء جملة ممتد لجافا سكريبت. عندما نستخدم JSX ، يمكننا أيضًا استخدام تعبيرات Javascript داخل طريقة العرض.
قد تحتوي طريقة العرض () الخاصة بالمكونات الرئيسية على مكونات فرعية بداخلها. كل ذلك يتبع نمط التركيب ، الذي هو أساس مكونات التفاعل.
عندما يتم استدعاء طريقة العرض الأصل ، يبدأ العرض للمكونات الفرعية أيضًا ، ويكتمل التجسيد الرئيسي فقط بعد اكتمال التصيير الفرعي بالكامل.
طريقة التقديم هي طريقة مطلوبة ؛ بدون هذا ، لا يمكن عمل المكون لأن هذا هو المكان الوحيد حيث يمكن كتابة جزء عرض المكون.
طريقة التقديم نقية ؛ هذا يعني أنه لا يمكنه تعديل الحالة بداخله.
بالنسبة لأي مكون في مرحلة التحديث ، ستحدث إعادة تصيير مكون معين أو لا قد تعتمد على نوع إرجاع طريقة دورة الحياة shouldComponentUpdate () أو استخدامها.
لا يُنصح بإجراء مكالمات API وأي تفاعل مع المتصفح داخل هذه الطريقة ، وسيؤدي ذلك إلى حدوث خطأ.
● componentDidMount ()
يتم استدعاء هذه الطريقة على الفور بعد تركيب المكون. الآن DOM متاح لمزيد من التلاعب. يمكن للمرء استدعاء setState داخل هذه الطريقة.
أيضًا ، يمكن إجراء التفاعل مع استدعاءات المتصفح أو واجهة برمجة التطبيقات من هنا.
يتم استدعاء هذه الطريقة مرة واحدة فقط ، وهي أثناء وقت الإنشاء. لن تعمل الطريقة في أي جزء آخر لإعادة التصيير ، ولن يعمل المنطق بداخلها أيضًا.
● componentDidUpdate ()
هذا هو نفس المكون componentDidMount .؛ يمكن للمرء أن يحصل على خطأ مع الاختلاف الوحيد الذي لا يتم استدعاءه إلا عند حدوث إعادة تصيير أحد المكونات. لا يتم استدعاء هذه الطريقة للتصيير الأولي.
يمكن إجراء setState والآثار الجانبية داخل هذه الطريقة. لكن المجموعة setState تحتاج إلى لفها في شرط ؛ وإلا ، فقد ينتهي الأمر في حلقة التصيير اللانهائية ، ولن ينتهي العرض أبدًا.
أيضًا لن يتم استدعاء componentDidUpdate إذا كان shouldComponentUpdate () يعيد القيمة false.
● componentWillUnmount ()
تسمى هذه الطريقة عندما تستمر مرحلة فك أحد المكونات.
داخل الطريقة ، من الناحية المثالية ، يمكن إزالة معالجات الأحداث وتنظيف الذاكرة.
لا يجب استدعاء الدالة setState () داخل هذا لأنها تتسبب في إعادة تصيير أحد المكونات.
● shouldComponentUpdate ()
أثناء تطوير تطبيقات التفاعل ، غالبًا ما تكون هناك حالات يتعين على المرء فيها تجنب إعادة عرض المكونات غير الضرورية. لتحقيق هذا المكون داخل الفصل ، يتبع المرء الطريقة المذكورة أعلاه. إذا أعادت هذه الطريقة خطأ ، فلن تحدث إعادة تصيير المكون ومكوناته الفرعية.
يمكن التحقق من الدعائم السابقة ومقارنتها مع الدعائم الجديدة المقدمة لضمان عدم وجود تغيير ثم إرجاع القيمة false.
استدعاء طريقة setState () داخل هذا لا ينصح به مرة أخرى ، فقد يتسبب في إعادة التصيير.
أيضا ، لا ينبغي تنفيذ الآثار الجانبية داخل هذه الطريقة.
هناك أيضًا بديل آخر لهذه الطريقة. يمكن للمرء استخدام React.pureComponents أثناء تمديد الفصل. هذا أكثر استقرارًا وموثوقية بكثير من shouldComponentUpdate ().
أخيرًا وليس آخرًا ، يوجد نوع حدود الخطأ لمكونات التفاعل الموجودة للقبض على الأخطاء.
على المرء أن يلف المكون بمكون حدود الخطأ ببساطة.
داخل هذا المكون الخاص ، هناك طريقتان لدورة الحياة تستخدمان: -
- getDerivedStateFromError ثابتة ()
- componentDidCatch ()
يتم استدعاء كلاهما إذا ألقى أي مكون تابع خطأ.
يتم استدعاء النوع الأول أثناء مرحلة التجسيد ، لذلك لا يُسمح بأي آثار جانبية بداخله. يتم استدعاء المرحلة الثانية أثناء مرحلة الالتزام ، لذلك يُسمح بالآثار الجانبية بداخلها.
اقرأ أيضًا: راتب مطور ReactJS في الهند
تعلم دورات هندسة البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.
خاتمة
تضيف دورة حياة مكون التفاعل التعقيد إلى الكود ، لكن التنفيذ المنهجي والمعالجة التي تتم من خلال الأساليب تبدو جذابة للغاية من منظور المطور. تتيح دورة حياة React للفرد إعادة هيكلة المكونات أو معالجتها.
إذا كنت مهتمًا بمعرفة المزيد حول التفاعل والتطوير الشامل ، تحقق من برنامج upGrad & IIIT-B Executive PG في تطوير البرامج الكامل المكدس المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، وأكثر من 9 مشاريع ، والمهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.
