كمُطور React، من المحتمل جدًا أنك قد مررت بمرحلة وجدت فيها أن الاكواد في مشروعك تزداد تعقيدًا لامنتاهيًا بسبب استخدامك لـ Class Component في المشروع.
لحسن الحظ فريق React أعادوا البهجة لجميع المطوّرين من خلال اضافة جبارة وهي الـ Hooks 😍✨
تبغى تتعرف عليها؟ تابع الثريد👇🏻
لحسن الحظ فريق React أعادوا البهجة لجميع المطوّرين من خلال اضافة جبارة وهي الـ Hooks 😍✨
تبغى تتعرف عليها؟ تابع الثريد👇🏻
قبل مانتعرف على مفهوم الـ Hooks، ليش احنا كمُطورين نٌفضل التعامل مع الـ Function component اكثر من التعامل مع الـ Class component في الرياكت؟
السبب في "السهولة" و "البساطة" و "قابلية القراءة والتعديل" الي بتوفرها لنا الFunction component عند التعامل معها.
السبب في "السهولة" و "البساطة" و "قابلية القراءة والتعديل" الي بتوفرها لنا الFunction component عند التعامل معها.
نلاحظ في الصور الفرق الواضح بين استخدام الطريقتين من حيث قصر الكود وبساطته.👇🏻
في السابق كان مطورين React مايقدرون يستخدمون الأمور المهمة والموجودة في الـ Class component
مثل الـ state, Lifecycle methods وغيرها عند استخدامهم للـ Function compoent.
وهذا بدوره أدى إلى عزوف المطورين عن استخدامها لانهم كانو مضطرين الى تحويل الـFunction الى Class Component ❌
مثل الـ state, Lifecycle methods وغيرها عند استخدامهم للـ Function compoent.
وهذا بدوره أدى إلى عزوف المطورين عن استخدامها لانهم كانو مضطرين الى تحويل الـFunction الى Class Component ❌
وجاء الحل المٌبهر لحل هذه المشكلة بانشاء مايُسمى بالـ React Hooks
فماذا يعني مفهوم الـ Hooks؟✨
هي طريقة تُمكننا من استخدام state, lifecycle methods وغيرها ضمن ال Function component
وبفضل استخدام الـHooks صارت اكوادنا أنظف وأسهل وقابلة للقراءة والتعديل وبدون تعقيد.✅
فماذا يعني مفهوم الـ Hooks؟✨
هي طريقة تُمكننا من استخدام state, lifecycle methods وغيرها ضمن ال Function component
وبفضل استخدام الـHooks صارت اكوادنا أنظف وأسهل وقابلة للقراءة والتعديل وبدون تعقيد.✅
للـ Hooks شروط لازم تنتبه لها لما تستخدمها وهي :
- ماتقدر تستخدم Hooks الا بداخل Function component.❌
- لابد اننا نستدعي الـ Hooks في اعلى مستوى داخل مكوّن الدالة.❌
- الـ Hooks ماينفع تكون داخل شروط او دوال تكرار. ❌
- ماتقدر تستخدم Hooks الا بداخل Function component.❌
- لابد اننا نستدعي الـ Hooks في اعلى مستوى داخل مكوّن الدالة.❌
- الـ Hooks ماينفع تكون داخل شروط او دوال تكرار. ❌
بتكلم بإيجاز عن واحد من انواع الـ Hooks وهو:
useState hook ✨
هذا النوع من اكثر الانواع استخدامًا ، ويتيح لنا القدرة على تحديث الحالة (state) من خلال انشاء دالة تتحكم بها ()setState
الكود لتوضيح طريقة الاستخدام👇🏻
useState hook ✨
هذا النوع من اكثر الانواع استخدامًا ، ويتيح لنا القدرة على تحديث الحالة (state) من خلال انشاء دالة تتحكم بها ()setState
الكود لتوضيح طريقة الاستخدام👇🏻
ومن أنواع الـ Hooks الي تُستخدم بكثرة أيضًا :
useEffect Hook ✨
هذا النوع يسمح لنا بالقيام بعمليات الـ side effect الي تأثر على الكمبوننت ككُل، والعمليات هذي ممكن تكون تحديث للـ DOM أو عمل Fetching للداتا أو غيرها.
useEffect Hook ✨
هذا النوع يسمح لنا بالقيام بعمليات الـ side effect الي تأثر على الكمبوننت ككُل، والعمليات هذي ممكن تكون تحديث للـ DOM أو عمل Fetching للداتا أو غيرها.
في الكلاس عادة كنا نعمل هذه التأثيرات على الكمبوننت بواسطة استخدام 🔄Life ycle methods وهي :
componentWillUnmount
componentDidUpdate
componentDidMount
تخيل أن الهوك هذا يقوم بعمل الثلاث الوظائف السابقة داخل فنكشن وحده فقط !!💡
componentWillUnmount
componentDidUpdate
componentDidMount
تخيل أن الهوك هذا يقوم بعمل الثلاث الوظائف السابقة داخل فنكشن وحده فقط !!💡
✨الـ useEffect سيتم تشغيلها افتراضيًا مع اول تحديث او (render) للصفحة، بالاضافة الى انها بتشتغل مع كل render او تحديث يتم في نفس هذه الصفحة.
كيف طريقة كتابتها؟ لاحظ الصور في الاسفل.👇🏻
كيف طريقة كتابتها؟ لاحظ الصور في الاسفل.👇🏻
النوع الثالث من الـ Hooks هو useContext✨:
يستخدم هذا النوع لإدارة الـ state بشكل عام وتسهيل نقلها بين الكمبوننت داخل المشروع (نفس وظيفة الـ Redux).
نقدر نستخدمها مع useState بنفس الوقت لجعل طريقة انتقال الحالة (state) بين الكمبوننت اسهل.💯
يستخدم هذا النوع لإدارة الـ state بشكل عام وتسهيل نقلها بين الكمبوننت داخل المشروع (نفس وظيفة الـ Redux).
نقدر نستخدمها مع useState بنفس الوقت لجعل طريقة انتقال الحالة (state) بين الكمبوننت اسهل.💯
- حتى ننشئ الـ context نحتاج لاستيراد createContext في الكمبوننت الرئيسي، واضافة كل كمبوننت نريد تمرير الداتا لها، لاننا بنستخدم الـ UserContext في كمبوننت اخر.
- أي كمبوننت نحتاج اننا نمررلها الداتا، بنستدعي الـuseContext بداخلها حتى تصلها الداتا من قِبل الكمبوننت الرئيسي.👇🏻
- أي كمبوننت نحتاج اننا نمررلها الداتا، بنستدعي الـuseContext بداخلها حتى تصلها الداتا من قِبل الكمبوننت الرئيسي.👇🏻
جاري تحميل الاقتراحات...