الفرق بين المراجعتين ل"React/higher order components"
< React
اذهب إلى التنقل
اذهب إلى البحث
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المكونات ذات الترتيب الأعلى}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المكونات ذات الترتيب الأعلى}}</noinclude> | <noinclude>{{DISPLAYTITLE:المكونات ذات الترتيب الأعلى}}</noinclude> | ||
| + | إنّ المكوّنات ذات الترتيب الأعلى (Higher-Order Components - React واختصارًا HOC) هي تقنية متقدمة في React لإعادة استخدام منطق المكونات. وهي ليست جزءًا من واجهة برمجة تطبيقات React API، بل هي نمط ينبثق عن طبيعة React التركيبية. | ||
| + | |||
| + | باختصار يكون المكوّن ذو الترتيب الأعلى عبارة عن دالة تأخذ مكوّنًا وتُعيد مُكوّنًا جديدًا:<syntaxhighlight lang="javascript"> | ||
| + | const EnhancedComponent = higherOrderComponent(WrappedComponent); | ||
| + | </syntaxhighlight>وفيما يُحوّل المكوّن الخاصيّات إلى واجهة مستخدم، يُحوّل المكوّن ذو الترتيب الأعلى مكوّنًا إلى مكوّن آخر. | ||
| + | |||
| + | تكون المكوّنات ذات الترتيب الأعلى شائعة في مكتبات React المُقدَّمة من طرف ثالث، مثل مكتبة connect الخاصة بـ Redux و مكتبة createFragmentContainer الخاصّة بـ Relay. | ||
| + | |||
| + | سنناقش في هذه الصفحة الفائدة من المكوّنات ذات الترتيب الأعلى وكيفية كتابتها. | ||
مراجعة 08:28، 24 أغسطس 2018
إنّ المكوّنات ذات الترتيب الأعلى (Higher-Order Components - React واختصارًا HOC) هي تقنية متقدمة في React لإعادة استخدام منطق المكونات. وهي ليست جزءًا من واجهة برمجة تطبيقات React API، بل هي نمط ينبثق عن طبيعة React التركيبية.
باختصار يكون المكوّن ذو الترتيب الأعلى عبارة عن دالة تأخذ مكوّنًا وتُعيد مُكوّنًا جديدًا:
const EnhancedComponent = higherOrderComponent(WrappedComponent);
وفيما يُحوّل المكوّن الخاصيّات إلى واجهة مستخدم، يُحوّل المكوّن ذو الترتيب الأعلى مكوّنًا إلى مكوّن آخر.
تكون المكوّنات ذات الترتيب الأعلى شائعة في مكتبات React المُقدَّمة من طرف ثالث، مثل مكتبة connect الخاصة بـ Redux و مكتبة createFragmentContainer الخاصّة بـ Relay.
سنناقش في هذه الصفحة الفائدة من المكوّنات ذات الترتيب الأعلى وكيفية كتابتها.