الاختيار بين مكونات الصنف والمكونات الوظيفية في React

الاختلافات الأساسية

في React ، المكون هو جزء من التعليمات البرمجية التي تمثل جزءًا من واجهة المستخدم. يوجد نوعان رئيسيان من المكونات في React: مكونات الصنف والمكونات الوظيفية.

تُعرَّف مكونات الصنف باستخدام فئة توسع فئة React.Component. فهي غنية بالميزات ولديها المزيد من الخيارات للتعامل مع أحداث الحالة ودورة الحياة. هذه هي الطريقة التي يبدو بها مكون الفصل:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

المكونات الوظيفية هي فقط وظائف JavaScript تعيد عنصر React. إنها أبسط من مكونات الفصل وأسهل في القراءة والكتابة. هنا نفس المكون المذكور أعلاه ، مكتوبًا كمكون وظيفي:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

متى تستخدم ماذا

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

1. قراءة: يمكن أن تسهل مكونات الفصل فهم الكود ، خاصةً إذا كان لديك الكثير من طرق الحالة أو دورة الحياة. تم تنظيم الكود في طرق محددة بوضوح ويسهل العثور عليها.

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

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

هناك أيضًا عدة أسباب وراء رغبتك في الكتابة المكونات الوظيفية:

1. عندما لا تحتاج إلى استخدام توابع الحالة أو دورة الحياة: إذا لم تكن بحاجة إلى استخدام توابع الحالة أو دورة الحياة ، فإن المكون الوظيفي يعد اختيارًا جيدًا ، لأنه أبسط وأسهل في القراءة والكتابة من مكون الفئة.

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

3. عندما تريد تحسين الأداء: نظرًا لأن المكونات الوظيفية نقية ، يمكن تحسينها بسهولة أكبر بواسطة React ، مما قد يؤدي إلى أداء أفضل.

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

بشكل عام ، يجب عليك استخدام المكونات الوظيفية ما لم تكن لديك حاجة محددة لا يمكن تلبيتها إلا مع مكون فئة.

useEffect & useState

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

إذا كنت لا تزال ترغب في تنفيذ أحداث الحالة أو دورة الحياة ، فستتاح لك إمكانية استخدام الخطافات لتمكين المكون الخاص بك.

هذه هي الطريقة التي ستنفذها استخدام التأثير و استخدام داخل المكونات الوظيفية الخاصة بك

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

هنا ، لدينا مكون يتتبع العد ، ويعرض العدد الحالي للمستخدم. يستخدم المكون ملف استخدام ربط لإضافة حالة إلى المكون الوظيفي ، و استخدام التأثير خطاف لتنفيذ إجراء (تحديث عنوان المستند) عندما يتغير العدد.

الوجبات السريعة الرئيسية

هذه هي النقاط الرئيسية عندما يتعلق الأمر بالاختيار بين مكونات الصنف والمكونات الوظيفية في React:

1. تُعرَّف مكونات الصنف باستخدام فئة توسع فئة React.Component ، ولديها المزيد من الخيارات لمعالجة أحداث الحالة ودورة الحياة.
2. المكونات الوظيفية هي فقط وظائف JavaScript تُرجع عنصر React ، وهي أبسط وأسهل في القراءة والكتابة.
3. يجب عليك استخدام المكونات الوظيفية إلا إذا كنت بحاجة إلى استخدام ميزة لا تتوفر إلا في مكونات الفئة ، مثل أساليب الحالة أو دورة الحياة.
4. يمكنك استخدام الخطاف useState و useEffect لإضافة الحالة وتنفيذ تأثيرات جانبية في المكونات الوظيفية.
5. بشكل عام ، يعود الاختيار بين مكونات الفصل والمكونات الوظيفية إلى ما يناسب احتياجاتك وما يجعل الكود الخاص بك أسهل في القراءة والفهم.

آمل أن يساعدك هذا الشرح الموجز. إذا كنت ترغب في الحصول على توجيه أو أي إرشادات حول مسارك لتعلم جافا سكريبت أو التفاعل أو تطوير الويب بشكل عام ، فلا تتردد في الاتصال بي لحضور جلسة 1: 1.

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://www.codementor.io/maximiliangeiger/making-the-choice-between-class-components-and-functional-components-in-react-20uvaeyqci