تحليل مكونات React

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

قياس ما يحدث بالفعل

لا يتعلق تحليل أداء React بالحدس؛ بل يتعلق بتفسير رقمين مفتاح يفسران معظم مشاكل الأداء:

• المدة الفعلية: الوقت الحقيقي الذي استغرقه React في عرض هذا التحديث، بما في ذلك جميع العناصر الفرعية.

• المدة الأساسية: تقدير React للمدة التي سيستغرقها إنشاء الشجرة الفرعية إذا لم يكن التخزين المؤقت موجودًا.

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

كيفية قراءة إخراج محلل الأداء في React 19

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

إليك ما ستراه عادةً:

• عدد عمليات العرض أكثر من عدد عمليات الالتزام: عملية العرض تخمينية، أما الالتزام فهو نهائي. العديد من عمليات العرض لا تصل أبدًا إلى مرحلة الالتزام.

• أشرطة مجزأة أو "متدرجة": يتم تنفيذ عمليات الانتقال على شكل أجزاء صغيرة. ينتج عن ذلك React بينها بحيث يمكن أن يشبه الرسم البياني اللهبي درجًا بدلاً من كتلة صلبة واحدة.

• تحديثات عاجلة تقطع الصف: الكتابة أو النقر يؤدي إلى عمليات عرض ذات أولوية عالية يتم تنفيذها على الفور، حتى أثناء استمرار عمل انتقال الخلفية.

• محاولات إعادة التحميل المعلقة: إذا لم تكن البيانات جاهزة، يقوم React بإعادة عرض الصفحة بشكل متكرر حتى يتم تحميلها. قد ترى عدة محاولات عرض قبل ظهور واجهة المستخدم البديلة أو النهائية.

• التجميع الذي يخفي عمليات الالتزام: غالبًا ما تؤدي التحديثات غير المتزامنة مثل المهلات أو الوعود إلى التزام واحد، حتى لو تمت إعادة تشغيل العرض عدة مرات داخليًا.

إن تفسير هذه الأنماط بشكل صحيح هو ما يميز مطوري React المتقدمين عن أولئك الذين يقومون فقط بتحسين المكونات المعزولة.

متىHeavyChart عند إعادة عرض المكونات دون داعٍ، يصبح شريط الرسم البياني عريضًا، وتتحمل أنت التكلفة كاملةً. وعندما يبدأ التخزين المؤقت، يتحول الشريط إلى اللون الرمادي أو يكاد يكون غير مرئي لأن React قد تخطى الشجرة الفرعية بأكملها. هذا هو أوضح مؤشر مرئي على ما إذا كانت بنية مكوناتك تمنع عمليات العرض المهدرة.

جمع كل شيء معًا

يتطلب تحليل أداء React 19 تفسير ثلاث طبقات في وقت واحد: ...