مقدمة

عمرك سألت نفسك ليش الشركات مولعة بـ 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.

الخلاصة

ما القادم؟

في الجزء الثاني رح نحكي عن أول Hook — وهي useState 👇

سؤال للتفكير

قبل React Hooks، ليش كانت Class Components مشكلة للمطورين — غير الأسباب اللي ذكرناها؟

اعمل تقييم للمقال في الأسفل👇