إليك تفاصيل الخوارزميات الرئيسية التي تدعم React:
1. خوارزمية الاختلاف
- تعد الخوارزمية المختلفة أمرًا بالغ الأهمية لكفاءة React.
- عندما تتغير حالة المكون أو خصائصه، تقوم React بمقارنة DOM الظاهري الحالي مع DOM الظاهري الجديد باستخدام هذه الخوارزمية.
- من خلال فحص شجرتين عقدة تلو الأخرى من الأعلى إلى الأسفل، يتم تحديد الاختلافات وتحديث العناصر التي تم تغييرها فقط في DOM الفعلي.
- يعمل هذا التحديث المستهدف على تقليل عمليات معالجة DOM المكلفة، مما يؤدي إلى أداء أسرع.
ولكن لجعلها خوارزمية أكثر نجاحًا/تحسينًا، نحتاج إلى إضافة مفاتيح في عناصر القائمة.
2. المصالحة
-
المصالحة هي العملية التي تستخدمها React لتحديث DOM.
- عند حدوث تغييرات في حالة المكون أو خصائصه، تقوم React بإنشاء DOM افتراضي جديد ومقارنته مع السابق.
- من خلال الاستفادة من الخوارزمية المختلفة، تحسب React الحد الأدنى من التغييرات اللازمة لمزامنة DOM الحقيقي مع DOM الافتراضي الجديد، مما يضمن تحديثات فعالة.
3. الألياف التفاعلية
- React Fiber عبارة عن نسخة مُعاد تصورها من خوارزمية التسوية الخاصة بـ React، والتي تم تقديمها في React 16.
- الهدف الأساسي للألياف هو تمكين العرض المتزايد، والذي يسمح بتقسيم عمل العرض إلى أجزاء أصغر وتوزيعه عبر إطارات متعددة.
- تتيح هذه الإمكانية لـ React إيقاف العمل مؤقتًا أو إحباطه أو إعادة استخدامه عند وصول تحديثات جديدة، وتعيين الأولوية لأنواع مختلفة من التحديثات، مما يؤدي إلى تحسين الاستجابة.
4. واجهة برمجة تطبيقات السياق
- تعالج واجهة برمجة تطبيقات السياق التحدي المتمثل في حفر الدعامات من خلال تمكين مشاركة البيانات عبر جميع مستويات تطبيق React.
- يستخدم علاقة الموفر والمستهلك لتمرير البيانات إلى شجرة المكونات، مما يبسط إدارة الحالة العالمية دون الحاجة إلى تمرير الدعائم يدويًا عبر كل مستوى.
ملاحظة:- لها مشاكلها الخاصة، سيتم تحديث المزيد المتعلقة بهذا في مقالة منفصلة.
لا تتردد في التواصل معي إذا كانت لديك أي استفسارات/مخاوف.