مقدمة React Hooks — الجزء الأول: شو هي Hooks ولماذا غيّرت عالم React؟
مقدمة
عمرك سألت نفسك ليش الشركات مولعة بـ React؟
السر إن React فجّرت قنبلة اسمها Hooks سنة 2019 في الإصدار 16.8، ومن هناك بدأ السباق — المطورين والشركات كلهم بدأوا يدخلوا React في مشاريعهم بشكل أوسع من أي وقت مضى.
في هذا المقال رح نفهم مع بعض:
- شو المشكلة اللي كانت قبل Hooks
- شو يعني React Hooks
- شو يعني Virtual DOM وكيف React بتشتغل بذكاء
شو يعني React Hooks؟
قبل React 16، كان الأساس هو Class Components. وكنت تعتمد على شيء اسمه Lifecycle Methods — وكانت الأمور أكثر تعقيداً بكثير.
المشكلة
هاي الـ methods داخل الـ class كانت تشتغل شئت أم أبيت.
وهنا السؤال المنطقي: أنا شيء ما استخدمته أصلاً، ليش يشتغل؟
Hooks جاءت كحل لهاي المشاكل وأكثر — بتخليك تكتب كود أبسط، أنظف، وأسهل في الصيانة.
قاعدة بسيطة لازم تعرفها قبل ما تبدأ
- كل Hook اسمه يبدأ بـ
use— مثلuseStateوuseEffect - الـ Hook لا تشتغل إلا داخل Functional Component أو Custom Hook
شو يعني Virtual DOM؟
أولاً: شو هو الـ Real DOM؟
صفحة الويب هي عبارة عن DOM يحتوي على كل الـ UI من
h1 وp وimg وغيرها.
وهاد اللي بتشوفه أمامك على المتصفح.
المشكلة مع الـ Real DOM
لو عندك counter وبدك تعمل +1 وتعرض الرقم داخل h1:
في الوضع الطبيعي، كل ما تغيّر العدد المتصفح كان يعيد رسم الـ DOM بالكامل من جديد.
وهاد الشيء بطيء — خصوصاً لما يكون عندك صفحة كبيرة فيها عناصر كثيرة.
الحل: Virtual DOM
React عملت شيء اسمه Virtual DOM.
الفكرة إنها عملت نسخة خفيفة من الـ DOM في الذاكرة على شكل JavaScript object.
وبالتالي لو تغيّرت الـ h1 بس — ليش أرسم الـ DOM كله
من جديد؟ بغيّر الـ h1 فقط وخلص.
React بتقارن القديم بالجديد، وما بتلمس الـ DOM الحقيقي إلا في اللي تغيّر فعلياً. وهاي العملية اسمها Reconciliation.
الخلاصة
| React Hooks | حل لمشاكل Class Components وLifecycle Methods |
| قاعدة Hooks | تبدأ بـ use وتشتغل فقط داخل Functional Component |
| Virtual DOM | نسخة خفيفة من الـ DOM بتخلي React تحدّث بس اللي تغيّر |
| Reconciliation | عملية مقارنة القديم بالجديد لتحديث الـ DOM بذكاء |
ما القادم؟
في الجزء الثاني رح نحكي عن أول Hook — وهي useState 👇
سؤال للتفكير
قبل React Hooks، ليش كانت Class Components مشكلة للمطورين — غير الأسباب اللي ذكرناها؟
اعمل تقييم للمقال في الأسفل👇

