37 lines
1.8 KiB
Markdown
37 lines
1.8 KiB
Markdown
|
---
|
|||
|
|
title: Functional vs Class Components
|
|||
|
|
localeTitle: مكونات وظيفية مقابل فئة
|
|||
|
|
---
|
|||
|
|
## 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>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
### ملخص
|
|||
|
|
|
|||
|
|
يتم استخدام مكونات الفئة كمكونات حاوية للتعامل مع إدارة الحالة وملف المكونات التابعة. عموما يتم استخدام المكونات الوظيفية فقط لأغراض العرض - هذه المكونات تستدعي الوظائف من المكونات الأصلية للتعامل مع تفاعلات المستخدم أو تحديثات الحالة.
|