Reactتعرف على React Hooks
- مفهوم الـهووكس في React
- شروط استخدام الهووكس في React
- أنواع الهووكس في React
مفهوم الـهووكس في React
الهووكس ( Hooks ) هي مجموعة من الميزات تم إضافتها في React ابتداءاً من الإصدار 16.8.
من خلالها يمكن تتبع دورة حياة المكونات ( Life Cycle ) المبنية كدوال ( Function Components ) مما يعني القدرة على معرفة متى يتم إضافة المكون في واجهة المستخدم، متى يحدث تغيير في البيانات التابعة له، متى يتم إزالته من واجهة المستخدم إلخ.. و بالطبع أي مرحلة يمر من حياة المكوّن يمكن ترقبّها و معالجتها.
بمجرد أن أصبح بالإمكان تتبع دورة حياة المكونات التي يتم تعريفها بأسلوب Function Components بدأ المطورون بالتخلي عن تعريف المكونات بأسلوب Class Components الذي كان هو فقط ما يتيح لهم ذلك.
شروط استخدام الهووكس في React
الهووكس نتعامل معها كدوال عادية و لكن يجب مراعات الشروط التالية لضمان أن تعمل بشكل صحيح:
- يجب أن تفعل
importللهووكس التي تنوي استخدامها. - يجب أن تكون موجودة بشكل مباشر بداخل المكوّن المبني كدالة و ليس بداخل شيء موجود فيها مثل حلقة أو جملة شرطية.
- يمكن استدعاءها من داخل المكونات المبنية كدوال فقط.
الهووكس لا يعملون في حال كان المكوّن مبني بأسلوب Class Component.
أنواع الهووكس في React
الجدول التالي يتضمن جميع دوال الهووكس المهمة الموجودة في React.
| الدالة و استخدامها | |
|---|---|
| 1 |
useState()
تسمح بإضافة حالة ( State ) للمكوّن، من خلالها يمكن تتبع أي تغيير يحصل في قيمة أي متغير، مصفوفة أو كائن موجود فيه و من ثم إعادة عرض المكوّن. |
| 2 |
useEffect()
تتيح مزامنة المكوّن حتى يتم تحديثه عند تغير قيمة متغير موجود فيه، عادةً ما يتم استخدامها للتحقق ما إن كان المستخدم قد قام بتسجيل الدخول قبل ان يتم عرض الصفحة. |
| 3 |
useContext()
تتيح هذه الدالة إدارة حالة ( State ) المكوّن من أي مكوّن موجود في واجهة المستخدم، مما يعني إمكانية مشاركة الحالة بين المكونات. |
| 4 |
useRef()
تتيح الوصول المباشر إلى عناصر واجهة المستخدم بالإضافة إلى الحصول على قيمة المتغير التي كانت موجودة قبل أن تغيّرت حالته.
|
| 5 |
useReducer()
مشابهة للدالة useState() و لكنها تتيح إضافة حالة ( State ) للمكون الذي يحتوي على بيانات أكثر تعقيداً بأسلوب أكثر بساطة. |
| 6 |
useCallback()
مفيدة في تحسين الأداء، حيث أنه يمكن استخدامها لتخزين نسخة من نتيجة الدالة التي تعرض المكون مما يعني أنه لا حاجة لإعادة رسم المكوّن في الصفحة طالما أن قيم خصائصه لم تتغير. و يتم تحديث هذه النسخة عندما يتم تغيير قيمة إحدى خصائص المكوّن. |
| 7 |
useMemo()
مفيدة في تحسين الأداء، حيث أنه يمكن استخدامها لتخزين نسخة من القيمة التي تم الحصول عليها في المكون مما يعني أنه لا حاجة لإعادة تنفيذ الأوامر التي من خلالها تم الحصول عليها طالما أن قيم خصائص المكون لم تتغير. و يتم تحديث هذه النسخة عندما يتم تغيير قيمة إحدى خصائص المكوّن. |
هذه كانت مجرد لمحة على أنواع الهووكس، في الدروس القادمة سنشرح طريقة استخدام كل واحد منهم بشكل مفصل.
