رد فعل البرنامج التعليمي الجزء 13: مكونات الطبقة القائمة

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



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر

الدرس 24. المكونات القائمة على الفصل

→ الأصل

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

عندما أقوم بتدريس دورات React ، أفضل أن أبدأ بالمكونات الوظيفية ، لأن الدوال هي بنى واضحة. نظرة واحدة على مكون وظيفي كافية لفهم بالضبط الإجراءات التي يؤديها. قل ، إليك رمز مكون وظيفي ، وهو عبارة عن دالة عادية تقوم بإرجاع عنصر <div> يحتوي على عنصر <h1> مع بعض النص.

 function App() {   return (       <div>           <h1>Code goes here</h1>       </div>   ) } 

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

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

تبدأ أوصاف المكون المستندة إلى class بكلمة أساسية class . ثم يأتي اسم المكون ، تم تجميعه وفقًا لنفس قواعد أسماء المكونات الوظيفية. في الوقت نفسه ، بعد إنشاء class App مثل class App لن يكون الأمر يشبه الدعامة ، ولكن بناء النموذج extends React.Component . بعد ذلك وضع زوج من الأقواس المتعرجة التي سيتم فيها وصف جسم الصف.

الفصول في JavaScript هي وظيفة إضافية لنموذج الوراثة النموذج الأولي. يمتد جوهر بناء class App extends React.Component هو أننا نعلن فئة جديدة ونشير إلى أن النموذج الأولي يجب أن يكون React.Component . يسمح لنا وجود هذا النموذج الأولي في المكون الخاص بنا باستخدام جميع الميزات المفيدة المتوفرة في React.Component في هذا المكون.

لذلك ، في هذه المرحلة من العمل على مكون قائم على الفئات ، يبدو الكود الخاص به كما يلي:

 class App extends React.Component {  } 

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

 class App extends React.Component {   render() {       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

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

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

 class App extends React.Component {     yourMethodHere() {         }     render() {       const style = this.yourMethodHere()       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

وهي ، ننتقل هنا من الافتراض أنه في طريقة yourMethodHere() ، يتم إنشاء الأنماط ، وأنها تُرجع إلى ثابت style yourMethodHere() في طريقة yourMethodHere() . يرجى ملاحظة أن الكلمة الرئيسية يستخدم this للوصول إلى طريقتنا الخاصة. سنتحدث لاحقًا عن ميزات هذه الكلمة الرئيسية ، ولكن الآن دعونا نركز على التصميم المقدم هنا.

الآن دعنا نتحدث عن كيفية العمل مع الخصائص التي تم تمريرها إلى الفئات عند إنشاء مثيلات في المكونات المستندة إلى الفصل.

عند استخدام المكونات الوظيفية ، أعلنا وظيفة مقابلة مع معلمة props ، وهي كائن تلقى ما تم تمريره إلى المكون عندما تم إنشاء مثيل له. يبدو مثل هذا:

 function App(props) {   return (       <div>           <h1>{props.whatever}</h1>       </div>   ) } 

عند العمل مع مكون يستند إلى فصل دراسي ، فإن نفس الشيء يبدو كما يلي:

 class App extends React.Component {   render() {       return (           <div>               <h1>{this.props.whatever}</h1>           </div>       )   } } 

ملخص

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

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