ماهي الـ React Hooks ؟ وكيف استخدمها ؟ الجزء الاول (useState)

المقالات والنقاشات
, , ,
#1

ملاحضة : نفترض في هذه المقالة انك على معرفة باساسيات الـ React :ok_hand:

المقدمة : لم نقم بكتابتها نعلم ان وقتك ثمين لذا سندخل في الموضوع مباشرة :joy: :v:

ماهي React hooks ؟
حسب التوثيق وبكل بساطة

الـ Hooks هي إضافة جديدة إلى الإصدار 16.8 في React، إذ تسمح لك باستعمال State وميزات React الأخرى دون كتابة أي class components.

كانت الـ state و Lifecycle سابقا مقتصرة على class components فقط ولكن الان مع hooks يمكنك استخدام اغلبية ميزات class components في function components مع كود اقل واكثر ايجازا
لتوضيح الامر يمكنك مشاهدة الصورة

1
11152×1506 246 KB

و الان لابد انك اخذت فكرة عن الامر لذا دعنا نقم بشرحه :innocent:

1
11152×660 248 KB

2
21152×625 248 KB

3
31152×763 326 KB

4
41152×1014 151 KB

5
51152×1245 238 KB

6
61152×1451 294 KB

كانت هذه اهم جوانب الـ useState واي اضافة اكون سعيد برؤيتها في التعليقات :innocent:
في المقالة القادمة سنقوم باذن الله بشرح useEffect و كيفية انشاء custom hook
اسودعكم الله

المصادر:
جميع الامثلة و المعلومات من التوثيق الرسمي لل reactjs

7 Likes
#2

جميل بالتوفيق فى القادم :+1:

1 Like
#3

لطالما كنت أظن hooks جاءت لتحل مشكلة state لكنها في الأخير مجرد اختصار للكومبوننت :sweat_smile:
شكرا حسين الموضوع رائع تماما مثل ما كنت أنتظره :heart:

1 Like
#4

ويبقى مشكل الـ state الرفيق الدائم :joy: ومع هذا كانت Hooks حل جميل وبسيط للمساعدة في ادارتها من خلال custom hook وظنك كان في مكانه

العفو اخي و القادم اجمل باذن الله :black_heart:

1 Like
#5

:heart_eyes: ان شاء الله

1 Like
#6

شكرا حسين :+1: على المقال المفيد.

اود ان اضيف ان ال hooks بشكل عام وفرت خصائص لتسهيل التعامل مع ال state :

  • يمكن استخدام useState للتعامل مع states الحالات السهلة
  • ا useReducer تستخدم عند التعامل مع states الحالات المعقدة
  • اخيرا ال useContext تجعل ال state عامة global حيث يصبح استخدام وتغيير اي حالة متاح لاي كائن في شجرة الكائنات حتى لو كان الكائن لا يملك الحالة.

ال useContext بالذات سهلت استخدام ال state كثيرا :heart_eyes:

2 Likes
#8

شكرا لك اخي ابراهيم على الاضافة
استغلال الـ hooks بالطريقة الصحيحة سيجعل الامور اكثر سلاسة وبساطة :ok_hand:
وبالنسبة لل hooks التي ذكرتها ساشرحها كلها باذن الله
اردت جعل لكل قسم مقالة لسهولة استعاب المعلومات و التركيز على دور كل واحدة بالتفصيل
وشكرا لك مرة اخرى على الاضافة اخي ابراهيم :black_heart:

3 Likes
#9

أتمنى أن تكمل السلسلة
لا تنسى أن احتراف أي فريمورك يجعل تعلم الثاني أسهل
لذلك، الطلب على هذه السلسلة تاريخي :smiley:

2 Likes
#10

ساكملها باذن الله اخي @sniperadmin في اسرع وقت لن نترك الموضع مفتوح :smile: قليل من الوقت فقط

1 Like