KnowledgeCity

React.js: مكوّنات الفئات

مكونات فئة React هي مفهوم أساسي في React.js يسمح للمطورين بإنشاء مكونات واجهة المستخدم القابلة لإعادة الاستخدام وبحالة Stateful باستخدام بناء جملة…

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

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

سوف نستكشف كيفية تحديد واستخدام الخاصيات في مكوناتنا، بما في ذلك كيفية تعيين القيم الافتراضية والتعامل مع الخاصيات المفقودة أو غير الصالحة. سنناقش أيضًا أفضل الممارسات لتسمية وتكوين الخاصية وكيفية التعامل مع هياكل البيانات المعقدة.

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

أهداف الدورة التدريبية:

  • فهم مكونات فئة React
  • فهم دوال دورة حياة React
  • فهم الحالة والوصول

المدرّب: Tony Davydets

المدّة: 10m · 3 دروس
المستوى: Beginner
اللغة: العربية

المهارات التي ستكتسبها

تصميم المكوناتمكتبات المكوناتمكونات HTMLرد فعل JsxReact.js (مكتبة جافا سكريبت)مكونات واجهة المستخدم

ما ستتعلمه

  • فهم بنية ودوال دورة حياة مكونات فئات React، بما في ذلك دوال constructor وrender وcomponentDidMount وcomponentDidUpdate وcomponentWillUnmount
  • إدارة واستخدام props داخل مكونات الفئات، بما في ذلك تمرير البيانات من المكونات الأب
  • تعيين قيم props الافتراضية والتعامل مع props المفقودة أو غير الصالحة
  • إدارة وتحديث حالة المكون (state) بناءً على تفاعلات المستخدم أو الأحداث الأخرى
  • تطبيق أفضل الممارسات لتسمية props وتكوينها والتعامل مع هياكل البيانات المعقدة
  • بناء واجهات مستخدم ديناميكية وتفاعلية باستخدام props وstate

النقاط الرئيسية

  • تتيح مكونات فئات React للمطورين إنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام وذات حالة باستخدام بنية قائمة على الفئات.
  • تتضمن دوال دورة حياة مكون الفئة كلاً من constructor وطريقة render وcomponentDidMount وcomponentDidUpdate وcomponentWillUnmount.
  • تُستخدم props لتمرير البيانات من المكونات الأب، ويمكن أن تتضمن قيمًا افتراضية والتعامل مع props المفقودة أو غير الصالحة.
  • يمكن تحديث الحالة (state) بناءً على تفاعلات المستخدم أو الأحداث الأخرى لبناء واجهات مستخدم ديناميكية وتفاعلية.
  • تغطي أفضل الممارسات لـ props التسمية والتكوين والتعامل مع هياكل البيانات المعقدة.

الأسئلة الشائعة

ماذا تغطي هذه الدورة؟

تغطي الدورة بنية ودوال دورة حياة مكونات فئات React، بما في ذلك constructor وطريقة render وcomponentDidMount وcomponentDidUpdate وcomponentWillUnmount، بالإضافة إلى كيفية إدارة واستخدام props وstate داخل هذه المكونات.

ما الذي سأكون قادرًا على فعله بعد إكمال هذه الدورة؟

سيكون لديك فهم قوي لكيفية إنشاء وإدارة مكونات فئات React والقدرة على استخدام props وstate بفعالية لبناء واجهات مستخدم ديناميكية وتفاعلية.

ما هي الدروس المضمنة؟

تتضمن الدورة ثلاثة دروس: مكونات الفئات ودوال دورة الحياة، وإدارة واستخدام props، وإدارة واستخدام state.

ما هي المهارات التي تركز عليها هذه الدورة؟

تركز الدورة على تصميم المكونات، ومكتبات المكونات، ومكونات HTML، وReact JSX، وReact.js (مكتبة جافا سكريبت)، ومكونات واجهة المستخدم.

كيف يتم التعامل مع props في هذه الدورة؟

توضح الدورة كيفية تعريف واستخدام props، وتعيين القيم الافتراضية، والتعامل مع props المفقودة أو غير الصالحة، واتباع أفضل الممارسات لتسمية props وتكوينها والتعامل مع هياكل البيانات المعقدة.

النص

النص

مرحبا، اسمي توني وفي. هذه الدروس سوف تتعلم عن مكونات الفئة أو الكلاس. والحالة ومكونات الخاصيات Props واستخدامها. سأوضح لك في هذا الدرس كيفية استخدام مكونات الفئة ودوال دورة الحياة Lifecycle. المكونات عبارة عن جزء مستقل من التعليمات البرمجية يمكن استخدامه بنفس طريقة استخدام دالة JavaScript. إنه يعمل على العزل ولكن التحذير الوحيد هو أن المكون يجب أن يُرجع دائمًا HTML لأن هذا هو التمثيل المرئي الذي سوف يتفاعل معه مستخدمنا طوال استخدام تطبيقنا. الآن، قبل إصدار React 16.8 القائم على الفئة. وكان المكون هو السبيل الوحيد للحفاظ على الحالة. ومكونات الدالة. كان يُنظر إليها على أنها مكونات أقل، إذا جاز التعبير، شيء بلا حالة Stateless. ولكن منذ إدخال Hooks كدالة. حالة استخدام UseState لدينا الآن حق الوصول إلى نفس وظيفة المكون التقليدي القائم على الفئة. الآن دعنا نلقي نظرة على ما ما هو المكون القائم على الفئة. والآن أولاً وقبل كل شيء نلاحظ أن. الكائن الذي هو مكون React قائم على الفئة يقوم دائمًا بتوسيع كيان يسمى مكون React. هذا شيء تم تنفيذه بواسطة مجموعة React وبالتالي فهو يحتوي على طرق دورة الحياة التالية. المتاحة لنا كما تم تنفيذها مسبقا. الوحيد من بين الكل. المطلوب منهم بالطبع هو طريقة التقديم Render Method. المُنشئ أو الكونستركتور Constructor هو أول دالة في دورة الحياة يتم استدعاؤها. ترى أنها تحصل على الخصائص على، وهو شيء يمثل في الأساس وسيطات من المحتمل أن يحصل عليها المكون الخاص بنا. لنفترض فقط أن هناك وسيطات سنستخدمها بشكل خاص طوال دورة حياة المكون الخاص بنا. يمكنك أن ترى أن الحالة يتم الاحتفاظ بها في متغير خاص يسمى هذه الحالة. الحالة هنا بسيطة جدًا نحن نضبط الخلفية على اللون الأبيض. أو FFF الست عشري وهو اختصار لـ FFF أو مجرد أبيض عادي. دالة دورة الحياة الثانية تسمى الحصول على الحالة المشتقة من الخاصيات Get derived state from props. الآن هذه دالة جيدة للقيام بتحديث الحالة إذا تم تحديث الحالة. هناك ما يبررها بناءً على الخاصيات التي يحصل عليها المكون الخاص بنا. لذلك دعنا نقول أن خلفيتنا الأولية باللون الأبيض ولكن إذا كان هناك شيء آخر تم تمريره إلى المكون الذي ينحرف عن. ما حددناه فالآن سنستخدم هذه الخاصية كاللون الخاص بنا الطريقة الثالثة في دوال دورة حياة المكون هي الطريقة الوحيدة المطلوبة وتسمى Render. كما ترون هذه الطريقة هي. خاصة لأنها ترجع HTML، وبشكل أكثر تحديدًا JSX. وسيكون هذا بمثابة تمثيل مرئي للمكون الذي سيتفاعل معه المستخدم. طوال دورة حياة تطبيقنا. هذا يشبه إلى حد كبير المكون الوظيفي ولكن يمكننا أن نرى في عرض التمثيل القائم على الفئة في الواقع طريقتها الخاصة، وكما قلت من قبل، هي مطلوبة. لذا، إذا لم يكن لديك هذه الطريقة بشكل أساسي، فسوف تتلقى شكوى من المفسر البرمجي الخاص بك والمكون الخاص بك لن يتم تجميعه. أخيرًا، الدالة الرابعة في طريقة دورة الحياة تسمى Component Didmount، ويتم تشغيلها بعد تشغيل المكون الخاص بنا بالكامل في DOM. وهذا مكان جيد لاتخاذ نوع من الإجراء النهائي على المكون الخاص بنا قبل تقديمه أخيرًا إلى المستخدم، وبعد ذلك يعود الأمر إلى المستخدم للتفاعل معه منذ ذلك الحين. في الدرس القادم، سوف نلقي نظرة أكثر تفصيلاً على ماهية الخاصيات وكيفية استخدامها مع المكونات القائمة على الفئة. شكرا لمشاهدتك. إلى اللقاء.

التعلّم أثناء التنقّل

تعلّم أينما كنت — يتيح لك تطبيق KnowledgeCity للجوّال مشاهدة الدروس أثناء التنقّل.