رد الفعل: الفرق بين المكون الطبقي والمكون الوظيفي

هل انت في علاقة جديدة هل تريد تعلم شيء جديد في أقل من 5 دقائق؟ دعنا نتعرف على مكون التفاعل.

ما هو المكون؟

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

يتم تعريف المكون (رد الفعل) على أنه كتلة أو برنامج يمكن إعادة استخدامه في البرنامج بأكمله (وليس الآخرين) ، وعادة ما يرتبط بعنصر واجهة المستخدم وسلوكه.

الآن بعد أن تعرفت على الأساسيات ، فلنلقِ نظرة على نوعين من المكونات التي يمكنك إنشاؤها في React و Class Component و Functional Components.

مكون الفصل

وهذا ما يسمى المكون الرئيسي. لدينا "فئة" في جافا سكريبت منذ ECMAScript 2015. يستخدم رد الفعل هذا النحو لإنشاء مكون حالة بدورة حياة. غالبًا ما تستخدم الدولة لتغيير سلوك ناخبينا أو أطفالهم.

دعونا كسر هذا الرمز. هنا لدينا "فئة JS" ترث الوظيفة من React.Component ، لذلك نعلن عن مُنشئ يقبل الدعائم كوسيطة. بعد ذلك ، نسمي البيانات ، نحن مطالبون بإنشاء هذا النوع من المكونات لتمرير البيانات إلى مكونات فئة الأصل.

"Requisite" عبارة عن كائن يتلقى جميع السمات التي نستخدمها كعلامة مكون.

يحتوي مكون المصباح على اقتراح أساسي يوفر كتلة HTML مع النص والأزرار.

بالضغط على مفتاح الإضاءة أو إيقاف تشغيله ، يتم تشغيل موقعنا. من مصباحنا.

هذه "الحالة" هي كائن له بعض الخصائص التي تتغير أثناء تنفيذ الدورة. لا يجب تغييره مباشرة ، ولكن طريقة setState.

يمكنك تغيير الحالة على النحو التالي:

مكون وظيفي

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

ضع في اعتبارك مثالاً لمكون لمبة.

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

سنستخدمه الآن لإظهار كيف يمكن أن يعمل مكون المصباح معًا.

سيؤدي ذلك إلى تغيير صورة المصباح الكهربائي عند الضغط على الزر.

ماذا عن خطاف؟

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

شكرًا للقراءة ، وإذا أعجبك ذلك أم لا ، أخبرني برأيك. -