freeCodeCamp/guide/arabic/react-native/functional-vs-class-components/index.md

1.8 KiB

title localeTitle
Functional vs Class Components مكونات وظيفية مقابل فئة

React Native - مكونات الطبقة الوظيفية مقابل

في React Native ، هناك نوعان رئيسيان من المكونات التي تشكل مكونًا - مكونات وظيفية ومكونات فئة . ويتم تنظيمها بنفس الطريقة المتبعة في تطبيق React العادي للويب.

مكونات الطبقة

مكونات الفئة هي فئات JavaScript ES2015 التي توسع فئة أساسية من React تسمى Component .

class App extends Component { render () { return ( <Text>Hello World!</Text> ) } }

يتيح ذلك الوصول إلى فئة App إلى أساليب دورة حياة React مثل render بالإضافة إلى وظيفة الحالة / الدعائم من الأصل.

مكونات وظيفية

المكونات الوظيفية هي أبسط. فهم لا يديرون حالتهم الخاصة أو يمكنهم الوصول إلى أساليب دورة الحياة التي يقدمها React Native. هم حرفيا وظائف جافا سكريبت عادي حرفيا. وهي تعرف أيضًا باسم المكونات عديمة الحالة.

const PageOne = () => { return ( <h1>Page One</h1> ); }

ملخص

يتم استخدام مكونات الفئة كمكونات حاوية للتعامل مع إدارة الحالة وملف المكونات التابعة. عموما يتم استخدام المكونات الوظيفية فقط لأغراض العرض - هذه المكونات تستدعي الوظائف من المكونات الأصلية للتعامل مع تفاعلات المستخدم أو تحديثات الحالة.