فهم بنية الألياف

يبدأ تحسين أداء React الفعال بفهم كيفية عمل المُعرِض في ظل التحديثات المتزامنة، وكثرة إدخال المستخدم، وكبر حجم بنية المكونات. حتى التطبيقات ذات البنية الجيدة ستعاني من بطء الأداء إذا استأثرت عملية العرض خيط الرئيسي. بدءًا من React 16، استبدلت Fiber عملية العرض المتكررة بحلقة عمل تعاونية قابلة للمقاطعة. يعتمد React 19 على هذا النموذج مع تحسين معالجة الأولويات، وانتقالات أكثر اتساقًا، وجدولة أكثر قابلية للتنبؤ. لتصميم بنى واجهة مستخدم قابلة للتوسع، من المفيد التعامل مع Fiber ليس كعنصر داخلي، بل كنظام يحدد كيفية ووقت عرض المكونات.

لماذا توجد الألياف

قبل تقنية Fiber، كان React يستخدم مكدس استدعاءات JavaScript لاجتياز شجرة المكونات. لكن هذا النهج، الذي يُعرف بـ"مواءمة المكدس"، كان يعاني من عيب مفتاح : فبمجرد بدء عملية العرض، لا يمكن مقاطعتها. فالمكونات المتداخلة بعمق أو الأشجار الفرعية المكلفة كانت تُعيق عمل خيط الرئيسي، مما يؤخر إدخال المستخدم والتحديثات الأخرى ذات الأولوية العالية.

يُعيد Fiber تصميم هذه العملية من خلال تمثيل كل وحدة عمل كعقدة Fiber مرتبطة ومُخصصة في الذاكرة الديناميكية، بدلاً من إطار مكدس استدعاءات مؤقت. وهذا يُتيح الإمكانيات الأساسية لـ React الحديثة: حيث يُمكن إيقاف العرض مؤقتًا، أو استئنافه، أو إعادة ترتيب أولوياته، أو التخلي عنه ديناميكيًا بناءً على أولويات وقت التشغيل. ويترتب على هذا التحول عدة آثار معمارية:

عقد الألياف والعرض التدريجي

تحتوي عقدة Fiber على كل ما يلزم لتقييم وحدة مكونة: الخصائص المعلقة، والحالة، وعلامات التأثير، والروابط إلى الألياف الفرعية، والألياف الشقيقة، وألياف الإرجاع. يستطيع React تقييم عقدة Fiber واحدة، وتحديد ما إذا كان سيستمر أو يتوقف، ثم استئناف التنفيذ من نفس النقطة لاحقًا.

الآثار المعمارية: عندما يُعاد عرض أجزاء كبيرة من الشجرة دون داعٍ، يتعين على React إعادة فحص فروع Fiber بأكملها. تؤثر حدود المكونات، واستقرار الخصائص، وتجزئة السياق على مقدار العمل الذي يمكن React إعادة استخدامه أو تخطيه.

إدارة أشجار الألياف

يحتفظ React بشجرتين من أشجار Fiber: الشجرة الحالية وشجرة العمل قيد التقدم.

• تمثل الشجرة الحالية واجهة المستخدم المخصصة المعروضة للمستخدم.

• شجرة العمل قيد التقدم هي حالة واجهة المستخدم التالية التي يتم حسابها.

لا يقوم React إلا بتعديل شجرة العمل قيد التنفيذ. إذا حدث تحديث ذو أولوية أعلى أثناء عملية العرض، فيمكن React تجاهل العمل غير المكتمل دون التأثير على واجهة المستخدم.

الآثار المعمارية: قد تتكرر أي عملية معالجة في مرحلة العرض إذا أُعيد تشغيلها. ويمكن أن يؤثر وضع عمليات حسابية مكلفة في مرحلة العرض أو التسبب في عمليات إبطال واسعة النطاق بشكل مباشر على الأداء.

تقسيم الوقت في الألياف

يقوم React بمعالجة شجرة العمل قيد التنفيذ، وحدةً تلو الأخرى. بعد كل وحدة عمل، يقوم بتقييم ما يلي:

"هل لا يزال لدي وقت في هذه المرحلة، أم يجب أن أستسلم للمتصفح؟" ...