يستخدم ملايين المطوّرين مكتبة React.js لبناء واجهات مستخدم تفاعلية وسريعة،
لكن القليل فقط يفهمون كيف تحقق React هذه السرعة فعليًا!
DOM
في البداية، يجب أن نعرف أن DOM (وهو ما يعرض مكونات الصفحة في المتصفح)بطيء نسبيًا عند التعامل المباشر معه،
لأن أي تغيير بسيط فيه ( مثل تعديل نص أو لون )
يؤدي إلى إعادة رسم (Repaint) وإعادة حساب لتخطيط الصفحة (Reflow)،
وهذه عمليات مكلفة جدًا من ناحية الأداء
Virtual DOM
ولحل هذه المشكلة،ابتكرت React فكرة عبقرية تعرف بالـ Virtual DOM.
الـ Virtual DOM هو نسخة افتراضية من واجهة المستخدم يتم حفظها في الذاكرة،
وعندما تتغير البيانات داخل المكوّنات (سواء عبر الحالة "state" أو الخصائص "props")،
لا تقوم React بتحديث الصفحة الحقيقية مباشرة،
بل تبني نسخة جديدة من الـ Virtual DOM وتقارنها بالنسخة السابقة،
باستخدام خوارزمية ذكية تُعرف باسم خوارزمية المقارنة (Diffing Algorithm).
Diffing Algorithm
تعمل هذه الخوارزمية على تحديد الأجزاء التي تغيّرت فقط،ثم تُحدّث React تلك الأجزاء داخل واجهة المستخدم الحقيقية دون المساس بالباقي
وهذا ما يجعل React سريعة جدًا في التحديثات، حتى مع التطبيقات الضخمة.
Components & Re-render
وهنا يأتي دور مفهوم آخر مهم جدًا في React وهو المكونات (Components).
فكل واجهة تبنى من مكونات صغيرة مستقلة،
كل مكوّن مسؤول عن نفسه فقط ويُعاد رسمه (Re-render) عندما تتغير بياناته.
وهذا يجعل الكود منظمًا، قابلًا لإعادة الاستخدام، وسهل الصيانة
Fiber Architecture
وفي الإصدارات الحديثة،
قدّمت React نظامًا داخليًا جديدًا يسمى Fiber Architecture،
وهو إعادة بناء عميقة لطريقة إدارة React للتحديثات.
تتيح هذه البنية الجديدة تقسيم العمل إلى أجزاء صغيرة
بحيث يمكن إيقاف عملية التحديث مؤقتًا واستئنافها عند الحاجة،
مما يجعل تجربة المستخدم أكثر سلاسة واستجابة
وتتأكد دائمًا من أن ما يُعرض على الشاشة هو فقط ما يحتاج فعلاً إلى التغيير.